Angular 5 HttpClient拦截器JWT刷新令牌无法捕获401并重试我的请

好的,首先我创建了一个服务来保存刷新令牌请求的状态,并创建了Observable来知道请求何时完成.

这是我的服务：

@Injectable()
export class RefreshTokenService {
  public processing: boolean = false;
  public storage: Subject<any> = new Subject<any>();

  public publish(value: any) {
    this.storage.next(value);
  }
}

I noticed that It was better if I have two Interceptors one to refresh the token and handle that and one to put the Authorization Header if exist.

这是用于刷新令牌的拦截器：

@Injectable()
  export class RefreshTokenInterceptor implements HttpInterceptor {

    constructor(private injector: Injector,private tokenService: RefreshTokenService) {
    }

    intercept(request: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
      const auth = this.injector.get(OAuthService);
      if (!auth.hasAuthorization() && auth.hasAuthorizationRefresh() && !this.tokenService.processing && request.url !== AUTHORIZE_URL) {
        this.tokenService.processing = true;
        return auth.refreshToken().flatMap(
          (res: any) => {
            auth.saveTokens(res);
            this.tokenService.publish(res);
            this.tokenService.processing = false;
            return next.handle(request);
          }
        ).catch(() => {
          this.tokenService.publish({});
          this.tokenService.processing = false;
          return next.handle(request);
        });
      } else if (request.url === AUTHORIZE_URL) {
        return next.handle(request);
      }

      if (this.tokenService.processing) {
        return this.tokenService.storage.flatMap(
          () => {
            return next.handle(request);
          }
        );
      } else {
        return next.handle(request);
      }
    }
  }

所以在这里我等待刷新令牌可用或失败,然后我发布需要授权头的请求.

这是放置授权标头的拦截器：

@Injectable()
  export class TokenInterceptor implements HttpInterceptor {
    constructor(private injector: Injector) {}

    intercept(request: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
      const auth = this.injector.get(OAuthService);
      let req = request;
      if (auth.hasAuthorization()) {
        req = request.clone({
          headers: request.headers.set('Authorization',auth.getHeaderAuthorization())
        });
      }

      return next.handle(req).do(
        () => {},(error: any) => {
          if (error instanceof HttpErrorResponse) {
            if (error.status === 401) {
              auth.logOut();
            }
          }
        });
    }
  }

我的主要模块是这样的：

@NgModule({
  imports: [
    ...,HttpClientModule
  ],declarations: [
    ...
  ],providers: [
    ...
    OAuthService,AuthService,RefreshTokenService,{
      provide: HTTP_INTERCEPTORS,useClass: RefreshTokenInterceptor,multi: true
    },useClass: TokenInterceptor,multi: true
    }
  ],bootstrap: [AppComponent]
})
export class AppModule {
}

请欢迎任何反馈,如果我有什么不妥,请告诉我.我正在使用Angular 4.4.6进行测试,但我不知道它是否适用于角度5,我认为应该可行.