从 Angular HttpInterceptor 中的可观察对象返回可观察对象答案

【问题标题】：Returning an Observable from an Observable in Angular HttpInterceptor从 Angular HttpInterceptor 中的可观察对象返回可观察对象
【发布时间】：2018-04-11 22:09:49
【问题描述】：

我正在使用 @ngrx/store 从 store 中获取令牌并将其放置在 HTTP 标头中，我尝试使用 flatmap mergeMap 但它们都不断重复 http 请求，当我使用 take(1)它继续循环请求并挂起，这就是我所拥有的：

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
   token$: Observable<string>;

   constructor(private readonly store: Store<fromRoot.State>) {
      this.token$ = store.select(fromAuth.getToken);
   }

   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        return this.token$
               .map(token => {
                  if (token) {
                     request = request.clone({setHeaders: {Authorization: `Bearer ${token}`}});
                  }
               })
              .mergeMap(() => next.handle(request));
   }
}

【问题讨论】：

您可能只需要使用 switchMap 并通过流实际传递您修改后的请求。

标签： angular rxjs angular-http-interceptors ngrx-store-4.0

【解决方案1】：

return this.token$
           .map(token => {
              if (token) {
                 request = request.clone({setHeaders: {Authorization: `Bearer ${token}`}});
              }
              return request;
           })
          .switchMap((req) => next.handle(req));

Switch map 获取一个 observable 并将其切换到另一个。在可观察序列中使用 map 时，您还需要实际传递一个值。我个人什至会将请求作为初始可观察流的一部分。

【讨论】：

它仍然使每个 HTTP 请求从客户端发出的请求加倍
你可能还需要take(1)：this.token$.take(1).map(...).switchMap(...)
我要冒昧地说你的 observable 请求加倍，因为你不小心在某个地方订阅了两次。你确认不拦截就只运行一次吗？
我添加了 take 并将值传递给 switchmap，现在它可以工作了，谢谢