Angular 拦截器在页面刷新时递归调用

Question

我正在使用 angular 拦截器修改所有到达 API 端的 http 请求。

仅当我从浏览器刷新应用程序时才会发生这种情况。

this.httpGET('api_handshake').subscribe(response => {
    this.APIHandShakeStatus = true
    if(response['status']==true){
        this._HS_STATUS = true
    } 
}, error => {
    this.logout()
});

它调用了：

httpGET(path: string, getData=null): Observable<any>  {

    const token: string = this.TOKENS.access_token;

    let headers = new HttpHeaders();
    headers  = headers.append('Content-Type', 'application/json');
    headers  = headers.append('Authorization', 'Bearer ' + token);


   let params = new HttpParams();
    params = params.append('uId', this._userDetails['uId']);
    if(getData!=null){
        for (let key in getData) {
            // Begin assigning parameters
            params = params.append(key, getData[key]);
        }
    }


    return  this._http.get(this.API_URL + path, { params, headers})
}

this._http.get使用标准拦截器拦截：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token: string = this.global.TOKENS.access_token;

    //logging the updated Parameters to browser's console
    console.log("Before making api call : ", 'test');
    return next.handle(request).pipe(
        map((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                console.log('event--->>>', event);
                // this.errorDialogService.openDialog(event);
            }
            return event;
        }),
        catchError((error: HttpErrorResponse) => {
            let data = {};
            data = {
                reason: error && error.error.reason ? error.error.reason : '',
                status: error.status
            };

            if(data['status']==401){
                console.log('unauthroized')
                console.log(data)
            }
            return throwError(error);
        }));
}

重新开始，我验证了自己的身份并登录到调用以下函数的应用程序，它运行良好。然后我从调用此函数的浏览器刷新应用程序。

在 chrome 调试器上：

httpGET('api_handshake').subscribe

线路被反复呼叫。如果我删除拦截器，一切正常。

Answer 1

我能够找出问题所在。从服务到拦截器存在循环依赖。然而，angular 没有抛出任何循环依赖错误，调试器也没有循环遍历依赖。弄了半天多才弄明白

当拦截器和服务之间存在循环依赖时。无法调试错误，因为 angular 编译器未捕获到该错误。

Angular 拦截器在页面刷新时递归调用

Angular Interceptor calls recursively on page refresh

interceptor

angular-http-interceptors

angular