如何使 Angular 5 httpClient 订阅等待拦截器响应答案

【问题标题】：How to make Angular 5 httpClient subscription wait for interceptor response如何使 Angular 5 httpClient 订阅等待拦截器响应
【发布时间】：2018-09-20 06:02:54
【问题描述】：

短版：---

如何让 (http).post().subscription() 等待截获的响应而不是 401 响应？

---- 长版----

在我的 userHttpService 中，我有这个从组件调用的函数（使用 HttpClient）：

 findCostumer(companyName: string){
    let data = {companyName: companyName}
    return this.http.post('http://localhost/angular2/findCostumer.php', JSON.stringify(data),{responseType:'text'})
}

为了能够访问 findCostumer.php，我必须登录，因为我在拦截器中发送令牌 In 标头。

const cloned = req.clone({
                headers: req.headers.set('Authorization', localStorage.getItem('jwt')).
                set('refreshToken', localStorage.getItem('refreshToken'))                 
        })

效果很好。

但是，如果 JWT 已过期，我想使用我的持久刷新令牌刷新该令牌。这是我的全部代码：

intercept(req:HttpRequest<any>, next:HttpHandler ): Observable<HttpEvent<any>>{
    if(localStorage.getItem('jwt') && localStorage.getItem('refreshToken')){
        const cloned = req.clone({
                headers: req.headers.set('Authorization', localStorage.getItem('jwt')).
                set('refreshToken', localStorage.getItem('refreshToken'))                 
        })
       let userhttpservice = this.injector.get(UserHttpService);

        return next.handle(cloned).catch(er=>{
            if(!this.update && er.status == 401)
            {
                 userhttpservice.refreshToken().mergeMap(re=>{
                    console.log(re)
                    this.update = false
                    let json = JSON.parse(re);
                    localStorage.setItem('jwt', json['jwt'])
                    localStorage.setItem('refreshToken', json['refreshToken'])
                    let cloned3 = req.clone({
                        headers: req.headers.set('Authorization', localStorage.getItem('jwt')).
                        set('refreshToken', localStorage.getItem('refreshToken'))  

                     })
                    return next.handle(cloned3)
                }).subscribe();
                //return next.handle(cloned)
                this.update = true;     

            }
            return Observable.throw('')
        })      
    }
    else
        return next.handle(req) 
}

userHtppService 中的refreshToken-function:

 refreshToken(){
    let data =  {'token':localStorage.getItem('refreshToken')};
    return this.Http.post('http://localhost/angular2/refreshToken.php', JSON.stringify(data),{responseType:'text'})  
}

这也很好用。然而。在 findCostumer.php 的订阅上只得到 401 响应。不是我刷新令牌后要求的。我想这与 catch()-operator 返回 Observable.throw('') 有关刷新令牌后。如何让.subscription() 改为等待状态 200 页面？

【问题讨论】：

我测试了 swicthMap 和 retry()-operator 但没有成功

标签： httpclient angular5 interceptor subscription

【解决方案1】：

我想它可以按如下方式完成（但在拦截器中调用 HttpClient 被认为是不好的做法，因为它可能会创建循环调用：

import {HttpClient, HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Rx";
import {LoginModalComponent} from "@app/shared/components/login-modal/login-modal.component";
import {BsModalService} from "ngx-bootstrap";
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpAuthInterceptor implements HttpInterceptor {

  constructor(private httpClient: HttpClient) {
  }

  private isAuthError(error: any): boolean {
    return error instanceof HttpErrorResponse && error.status == 401;
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const intialRequest = request.clone();

    return next.handle(request)
      .catch((error) => {
        if (!this.isAuthError(error)) {
          return Observable.throwError(error);
        }

        this.httpClient.get('/refresh-token').subscribe(res => {
          console.log('Token refreshed');

          // repeating initial request
          return next.handle(intialRequest).do(res => res);
        });
  }
}

【讨论】：