管道catchError在刷新拦截器中的令牌时不起作用

时间:2019-07-01 08:15:01

标签: angular ecmascript-6 interceptor rxjs6

问这可能是一个愚蠢的问题,但是我创建了一个拦截器,在该拦截器中,如果代码401响应失败并使用api刷新令牌,我将捕获该拦截器。它工作正常,但如果由于某种原因刷新令牌api也失败,我也想捕获该错误,这里的代码

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    constructor(private authService: AuthService) { }

    isRefreshingToken: boolean = false;
    tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | any> {

        return next.handle(this.addTokenToRequest(request, this.authService.getJWT()))
            .pipe(
                catchError(err => {
                    if (err instanceof HttpErrorResponse) {
                        switch ((<HttpErrorResponse>err).status) {
                            case 401:
                                return this.handle401Error(request, next);
                            case 400:
                                return <any>this.authService.logout();
                        }
                    } else {
                        return throwError(err);
                    }
                }));
    }

    private addTokenToRequest(request: HttpRequest<any>, token: string): HttpRequest<any> {
        return request.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
    }

    private handle401Error(request: HttpRequest<any>, next: HttpHandler) {

        if (!this.isRefreshingToken) {
            this.isRefreshingToken = true;

            // Reset here so that the following requests wait until the token
            // comes back from the refreshToken call.
            this.tokenSubject.next(null);

            return this.authService.refreshToken()
                .pipe(
                    switchMap((refreshToken: any) => {
                        console.log('here');
                        if (refreshToken) {
                            this.tokenSubject.next(refreshToken.token);
                            this.authService.setJWT(refreshToken.token);
                            this.authService.setRefreshToken(refreshToken.refreshToken);
                            // localStorage.setItem('currentUser', JSON.stringify(user));
                            return next.handle(this.addTokenToRequest(request, refreshToken.token));
                        }else{

                        }

                        return <any>this.authService.logout();
                    }),
                    catchError(err => {
                        console.log('here', err);
                        return <any>this.authService.logout();
                    }),
                    finalize(() => {
                        console.log('here');
                        this.isRefreshingToken = false;
                    })
                );
        } else {
            this.isRefreshingToken = false;

            return this.tokenSubject
                .pipe(filter(token => token != null),
                    take(1),
                    switchMap(token => {
                        return next.handle(this.addTokenToRequest(request, token));
                    }));
        }
    }
}

在调用return this.authService.refreshToken()的行上的通知,如果refreshToken()失败,则不会到达catchError

我知道,只有原始请求失败时,它才可能到达catchError。所以在服务中,我尝试从刷新令牌api捕获错误,代码如下:

refreshToken(): Observable<any> {
    let jwt = this.getJWT();
    let refreshToken = this.getRefreshToken();

    debugger;
    return this.http.post<any>(this.api.REFRESH_TOKEN, { refreshToken: refreshToken, expiredToken: jwt })
      .pipe(
        map(result => {
          console.log('here');
          debugger;
          return result;
        }),
        catchError(e => {
          debugger;
          console.log(e, 'here');
          return null;
        })
      );
  }

如果刷新令牌api失败,它甚至没有达到这一点,我的问题是我如何捕获刷新令牌api中的错误并将用户重定向到登录。 谢谢。

1 个答案:

答案 0 :(得分:1)

您必须在switchMap内移动 catchError 块,如果 catchError 处于启用状态,则将catchError置于Observable管道的第一层并不是一种好的错误处理方法在Observable管道方法的第一级,将调用 finalize 运算符

.pipe(switchMap((refreshToken: any) => {
      console.log('here');
      if (refreshToken) {
       this.tokenSubject.next(refreshToken.token);
       this.authService.setJWT(refreshToken.token);
       this.authService.setRefreshToken(refreshToken.refreshToken);
       // localStorage.setItem('currentUser', JSON.stringify(user));
       return next.handle(this.addTokenToRequest(request, refreshToken.token)).pipe(
           catchError(err => {
               console.log('here', err);
               return <any>this.authService.logout();
            })
       );
     }
     else{}

     return <any>this.authService.logout();
}),

 finalize(() => {
 console.log('here');
 this.isRefreshingToken = false;
})