Angular 4.3中的HttpInterceptor：在jwt刷新后在拦截器中重新发送请求

Question

我想知道如何在错误验证后用httpinterceptor重新发送请求？

我检查是否有错误（刷新我的JWT令牌），刷新后我想再次提交失败请求。

httpinterceptor.js：

import { Observable } from 'rxjs'; 
import { Injectable, Inject, Injector } from '@angular/core'; 
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http'; 
import { UserService } from "./user/services/user.service"; 
import { Router } from "@angular/router"; 

@Injectable() 
export class AngularInterceptor implements HttpInterceptor { 
    public userService; 

    constructor(private router: Router, 
       private injector: Injector) { 
    } 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     const clonedRequest = req.clone(); 

     this.userService = this.injector.get(UserService); 

     return next.handle(req) 
      .do(event => { 
       if (event instanceof HttpResponse) { 
        //normal request 
        console.log(event); 
       } 
      }) 
      .catch((res) => { 
       console.log('catch error'); 

       if (res.status === 401 || res.status === 403) { 
        this.userService.refreshToken().subscribe((data: any) => { 
         this.userService.token = data.token; 

         localStorage.removeItem('data-app'); 

         localStorage.setItem('data-app', JSON.stringify({token: data.token})); 

         next.handle(clonedRequest).do(event => { 
          console.log('in handle'); 
          if (event instanceof HttpResponse) { 
           console.log('rexecuted done !'); 
          } 
         }); 
        }); 

        this.userService.logOut(); 
       } else if (res.status === 500) { 
        console.log('token invalid'); 

        return Observable.throw(res); 
       } else { 
        return Observable.throw(res); 
       } 
      }); 
    } 
} 

Answer 1

解决

与乐于助人后https://stackoverflow.com/a/45944426/5453732

import { Observable } from 'rxjs'; 
import { Injectable, Inject, Injector } from '@angular/core'; 
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http'; 
import { UserService } from "./user/services/user.service"; 

@Injectable() 
export class AngularInterceptor implements HttpInterceptor { 
    public userService; 

    constructor(private injector: Injector) { 
    } 

    private applyCredentials = function (req) { 
     return req.clone({ 
      headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('data-app')) 
     }); 
    }; 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

     this.userService = this.injector.get(UserService); 

     return next.handle(this.applyCredentials(req)) 
     /*.do(event => { 

      if (event instanceof HttpResponse) { 
       console.log(event); 
      } 
     })*/ 
      .catch((res) => { 
       console.log('Token refresh'); 

       if (res.status === 401 || res.status === 403) { 
        return this.userService.refreshToken().first().flatMap((data: any) => { 
         if (data.token !== '') { 
          localStorage.removeItem('data-app'); 
          localStorage.setItem('data-app', data.token); 

          this.userService.token = localStorage.getItem('data-app'); 
         } else { 
          this.userService.logOut(); 

          return Observable.throw(res); 
         } 

         return next.handle(this.applyCredentials(req)); 
        }); 
       } else if (res.status === 500) { 
        this.userService.logOut(); 
       } 

       return Observable.throw(res); 
      }); 
    } 
}