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。