Angular HTTP Interceptor 不執行 Observable

Question

我正在嘗試在 Angular 中實現一個滑動到期會話，會話應該隨着與 API 的每次交互而擴展。

HTTP 攔截器負責在每次響應后更新令牌。 這里的問題是authService.renewToken()調用從未真正執行對 API 的請求。 我確實在控制台中看到了begin renew token和renewToken日志消息，但從未觸發對 API 的令牌請求。

任何想法可能是這里的問題？

AuthenticationService


  public renewToken(token: string): Observable<Token> {

    console.log('renewToken');
    
    return this.api
      .createSession(token)
      .pipe(tap((newToken) => {
          console.log(token === newToken.token);

          this.saveToken(newToken);
        }));
  }

@Injectable()
export class ResponseInterceptor implements HttpInterceptor {
  private refreshingToken = false;
  private tokenSubject = new Subject<any>();

  constructor(private injector: Injector) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(tap(event => {

      if (this.shouldIntercept(event)) {
        this.tokenSubject.next(null);
        this.refreshingToken = true;

        const authService = this.injector.get(AuthenticationService);

        const currentToken = authService.getToken();

        console.log('begin renew token');
        
        return authService.renewToken(currentToken).pipe(
          switchMap((newToken: Token) => {
            console.log("newToken Recieved:", newToken.token);
            this.tokenSubject.next(newToken);
            return next.handle(req);
          }),
          finalize(() => { this.refreshingToken = false; })
        )
      }

      return next.handle(req);
    }), catchError(errorResponse => {
      this.refreshingToken = false;

      if (errorResponse.status === 401) {
        console.log('Unauthorised response received.');
        this.injector.get(Router).navigate(['error']);
      }
      return throwError(errorResponse);
    }));
  }

Answer 1

假設您的saveToken函數返回一個 observable，您可能看不到任何 API 響應的原因是tap不會訂閱this.saveToken 。 嘗試使用switchMap / exhaustMap / concatMap （IMO switchMap最有意義，因為它會在新請求到達時取消switchMap的請求）。 這些操作符將自動訂閱內部 observable。