Angular 2+ HttpIntercept : wait for token from server before returning intercept function

Question

我知道这个问题以前已经以一种方式/形状/形式得到了解决，但我已经回顾了我能找到的所有问题和答案，但我仍然不知道如何解决这个问题。

HttpIntercept.intercept 必须返回 next.handle(request)。但是，我需要它等待(我知道“等待”在前端是一个肮脏的词)不记名 token 从服务器返回，然后才能返回。我一生都无法找到实现这一目标的模式。在我们访问服务器获取不记名 token 之前，拦截函数无法返回。

如果此问题已得到解答，我深表歉意，请向我提供相应答案的链接。

非工作示例(函数在附加 token 之前返回):

export class TokenInterceptor implements HttpInterceptor {
  constructor(private auth: AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let token: string;
    this.auth.getToken().subscribe(response => {
      token = response['access_token'];
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    });

    return next.handle(request);
  }
}

Answer 1

使用 switchMap 从另一个 Observable 返回 Observable。

export class TokenInterceptor implements HttpInterceptor {
  constructor(private auth: AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let token: string;
    return this.auth.getToken().switchMap(response => {
      token = response['access_token'];
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });

       return next.handle(request);
    });
  }
}