从Angular HttpInterceptor中的Observable返回一个Observable

时间:2017-10-30 20:21:13

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

我正在使用 @ ngrx / 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));
   }
}

1 个答案:

答案 0 :(得分:4)

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

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