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

Question

我正在尝试实现401响应的捕获，并尝试在令牌刷新后基于Angular 4 Intericetor重试请求获取刷新令牌。我试图实现同样的事情，但我始终无法重试该请求，我真的不确定这是否是应用刷新令牌策略的最佳方法。这是我的代码：

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
 public authService;
 refreshTokenInProgress = false;
 tokenRefreshedSource = new Subject();
 tokenRefreshed$ = this.tokenRefreshedSource.asObservable();
 constructor(private router: Router, private injector: Injector) { }
 authenticateRequest(req: HttpRequest<any>) {
 const token = this.authService.getToken();
 if (token != null) {
 return req.clone({
 headers: req.headers.set('Authorization', `Bearer ${token.access_token}`)
 });
 }
 else {
 return null;
 }
 }
 refreshToken() {
 if (this.refreshTokenInProgress) {
 return new Observable(observer => {
 this.tokenRefreshed$.subscribe(() => {
 observer.next();
 observer.complete();
 });
 });
 } else {
 this.refreshTokenInProgress = true;

 return this.authService.refreshToken()
 .do(() => {
 this.refreshTokenInProgress = false;
 this.tokenRefreshedSource.next();
 }).catch(
 (error) => {
 console.log(error);
 }
 );
 }
 }
 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 this.authService = this.injector.get(AuthenticationService);
 request = this.authenticateRequest(request);
 return next.handle(request).do((event: HttpEvent<any>) => {
 if (event instanceof HttpResponse) {
 // do stuff with response if you want
 }
 }, (err: any) => {
 if (err instanceof HttpErrorResponse) {
 if (err.status === 401) {
 return this.refreshToken()
 .switchMap(() => {
 request = this.authenticateRequest(request);
 console.log('*Repeating httpRequest*', request);
 return next.handle(request);
 })
 .catch(() => {
 return Observable.empty();
 });
 }
 }
 });
 }
}

问题是在中从未到达切换映射...

if (err.status === 401) {
 return this.refreshToken()
 .switchMap(() => {

还有do运算符…

return this.authService.refreshToken()
 .do(() => {

这让我想到了我的authService refreshToken方法...

refreshToken() {
 let refreshToken = this.getToken();

 refreshToken.grant_type = 'refresh_token';
 refreshToken.clientId = environment.appSettings.clientId;
 return this.apiHelper.httpPost(url, refreshToken, null)
 .map
 (
 response => {
 this.setToken(response.data, refreshToken.email);
 return this.getToken();
 }
 ).catch(error => {

 return Observable.throw('Please insert credentials');
 });
 }
 }

它返回一个映射的可观察值，我知道如果我替换了do in，它需要订阅。。。

return this.authService.refreshToken()
 .do(() => {

通过订阅，我想我会打破可观察到的链条。我迷路了，我已经玩了很长时间没有解决办法。： D

Answer 1

下面的拦截器为您完成此任务

import {
  throwError as observableThrowError,
  Observable,
  Subject,
  EMPTY,
} from 'rxjs';

import { catchError, switchMap, tap, finalize } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpSentEvent,
  HttpHeaderResponse,
  HttpProgressEvent,
  HttpResponse,
  HttpUserEvent,
  HttpErrorResponse,
} from '@angular/common/http';
import { StoreService } from './store.service';
import { ApiService } from './api.service';

export const tokenURL = '/315cfb2a-3fdf-48c3-921f-1d5209cb7861'; //copied from api service

@Injectable()
export class SessionInterceptorService implements HttpInterceptor {
  isRefreshingToken: boolean = false;
  cachedRequests = [];
  tokenSubject: Subject<string> = new Subject<string>();

  constructor(
    private readonly store: StoreService,
    private readonly ApiService: ApiService
  ) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<
    | HttpSentEvent
    | HttpHeaderResponse
    | HttpProgressEvent
    | HttpResponse<any>
    | HttpUserEvent<any>
  > {
    let urlPresentIndex = this.cachedRequests.findIndex(
      (httpRequest) => httpRequest.url == req.url
    );

    if (this.isRefreshingToken && !req.url.endsWith(tokenURL)) {
      // check if unique url to be added in cachedRequest

      if (urlPresentIndex == -1) {
        this.cachedRequests.push(req);
        return this.tokenSubject.pipe(
          switchMap(() => next.handle(req)),
          tap((v) => {
            // delete request from catchedRequest if api gets called

            this.cachedRequests.splice(
              this.cachedRequests.findIndex(
                (httpRequest) => httpRequest.url == req.url
              ),
              1
            );
            return EMPTY;
          })
        );
      } else {
        //already in cached request array

        return EMPTY;
      }
    }

    return next.handle(this.updateHeader(req)).pipe(
      catchError((error) => {
        console.log(error);
        if (error instanceof HttpErrorResponse) {
          switch ((<HttpErrorResponse>error).status) {
            case 400:
              return this.handle400Error(error);
            case 403 || 401:
              if (req.url.endsWith(tokenURL)) {
                return observableThrowError(error);
              } else {
                this.cachedRequests.push(req);
                return this.handle401Error(req, next);
              }
            default:
              return observableThrowError(error);
          }
        } else {
          return observableThrowError(error);
        }
      })
    );
  }

  handle400Error(error) {
    if (
      error &&
      error.status === 400 &&
      error.error &&
      error.error.error === 'invalid_grant'
    ) {
      // If we get a 400 and the error message is 'invalid_grant', the token is no longer valid so logout.
      return this.logout();
    }

    return observableThrowError(error);
  }

  handle401Error(req: HttpRequest<any>, next: HttpHandler) {
    if (!this.isRefreshingToken) {
      this.isRefreshingToken = true;
      return this.ApiService.refreshToken().pipe(
        switchMap((newToken: string) => {
          if (newToken) {
            this.store.updateAccessToken(newToken);
            this.tokenSubject.next(newToken);
            return next.handle(this.updateHeader(this.cachedRequests[0]));
          }

          // If we don't get a new token, we are in trouble so logout.
          return this.logout();
        }),

        catchError((error) => {
          // If there is an exception calling 'refreshToken', bad news so logout.
          return this.logout();
        }),
        finalize(() => {
          this.isRefreshingToken = false;
        })
      );
    }
  }

  logout() {
    console.log('logging it out');
    // Route to the login page (implementation up to you)

    return observableThrowError('');
  }

  /*
        This method is append token in HTTP request'.
    */
  updateHeader(req) {
    const authToken = this.store.getAccessToken();
    console.log(authToken);
    req = req.clone({
      headers: req.headers.set('X-RapidAPI-Key', `${authToken}`),
    });
    return req;
  }
}

有关更多详细信息，您可以阅读我的中型文章令牌刷新侦听器重试失败的请求

看看它的工作原理

Answer 2

我很高兴你喜欢我的解决方案。我将把最终的解决方案放在这里，但是如果有人想知道我放弃的过程，请访问这里：刷新令牌OAuth身份验证Angular 4

好的，首先我创建了一个服务来保存刷新令牌请求的状态，并观察以知道请求何时完成。

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

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

我注意到，如果我有两个拦截器，一个用于刷新令牌并处理它，另一个用于放置授权标头（如果存在），那就更好了。

@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
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

请提供任何反馈，如果我做错了什么，请告诉我。我正在使用Angular 4.4.6进行测试，但我不知道它是否适用于Angular 5，我认为应该有效。