HttpRequest在截获时被取消

Question

Problem

我正在使用HttpInterceptor将Authorize标头添加到我的所有HTTP请求中。请求将发送到AWS API Gateway。但不幸的是，如果我拦截它们，我的所有请求都会被取消。

如果我直接将标头添加到请求中，一切都按预期工作，但是当我的令牌被异步获取时，第一个请求将失败，因为令牌尚未可用。这就是为什么我添加了如下所示的拦截器，其中this.getSession（）从Promise返回一个Observable：

intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {       
        return this.getSession()
            .mergeMap((session: CognitoUserSession) => {   
                if(session.getIdToken()){
                    request = request.clone({
                        setHeaders: {
                            Authorization: session.getIdToken().getJwtToken()
                        }
                    });  
                }
                return next.handle(request);
         });
    }

请求本身执行如下：

getStoreList(): Observable<string[]> {
 let uri = endpoint + 'getStores';
 return this.http.get<string[]>(uri, {headers: httpHeaders}).pipe(
   map((data) => {
     return data;
 }));
}

this.updateHistoryService.getStoreList()
      .subscribe((data: string[]) => {
        this.stores = ["all", ...data];
        this.getData();
});

但这导致：“XHR加载失败：OPTIONS”https://....eu-central-1.amazonaws.com/dev/getStores“”（我正在使用CORS，这就是发送飞行前请求的原因。）

What I've tried

如果我更改此行：

return next.handle(request);

至：

return from(next.handle(request).toPromise());

//the following works as well:
return next.handle(request).toPromise();

我可以在控制台中看到，数据是从服务器成功加载的，没有任何请求被取消，但我的回调从未被调用过，所以我无法处理数据。

Answer 1

我通过添加.pipe(takeWhile(() => this.alive))来实现它。看起来像这样：

return this.getSession()
   .pipe(takeWhile(() => this.alive))
        .mergeMap((session: CognitoUserSession) => {   
            if(session.getIdToken()){
                request = request.clone({
                    setHeaders: {
                        Authorization: session.getIdToken().getJwtToken()
                    }
                });  
            }
            return next.handle(request);
     });