Angular HTTP 拦截器如何链式调用 Observable。

Question

我正在使用Azure AD的adal库进行身份验证。有一个调用可以获取一个返回observable的令牌。如何将此observable添加到拦截器中？在下面的示例中，如何使在subscribe中设置的请求作为Observable返回？

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.authAzureService.getAccessToken()
    .subscribe(token => {
      // I need this to be returned
      request = this.getRequestWithHeaders(request, token);
    });

    // This returns the request before the access token is added
    return next.handle(request);
  }

- Michael Witt

Answer 1

感谢@Commecial Suicide提供的解决方案，即使用flatMap。以下是有效的代码：

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let requestHandler = this.authAzureService.getAccessToken()
    .flatMap(token => {
      request = this.getRequestWithHeaders(request, token);
      return next.handle(request);
    });
    return requestHandler;
  }

- Michael Witt

Answer 2

当你需要从Observable返回某些内容时，你可以使用map而不是subscribe:

return this.authAzureService.getAccessToken()
  .map(token => request = this.getRequestWithHeaders(request, token));
}

- P.S.

---

我认为这很接近，但还不完全正确。当我这样做时，“Get”从未通过网络传输。 - Michael Witt

使用 flatMap 提供了解决方案。我会发布我的代码。 - Michael Witt

Answer 3

request = request.clone({
  setHeaders: {
    Authorization: `Bearer ${token}`
  }
});
return next.handle(request);

- erni