Angular 2+ HttpIntercept：在返回拦截函数之前等待来自服务器的令牌

Question

我知道这个问题之前已经以一种方式/形状/形式解决过，但是我已经查看了我能找到的所有问题和答案，但我仍然无法弄清楚如何解决这个问题。

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

如果这已经得到回答，我深表歉意，请给我提供适当答案的链接。

非工作示例（函数在附加令牌之前返回）：

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返回。ObservableObservable

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);
    });
  }
}