当我在 HttpInterceptor 类中注入使用 HttpClient 的服务时，Angular 6 进入循环依赖的

Question

我在不同的 Angular 版本中多次发现这个问题，但多个消息来源说它已经修复，例如，Stackoverflow 上的另一个类似问题是有这个答案，它说它在 Angular 5.2 中解决了，Github 上的其他一些问题是说它在 6.0.2 中解决了，我正在使用 Angular 6.0.3，但仍然遇到这个问题， 每当我尝试在我的 HttpInterceptor 类中注入使用 HttpClient 的服务时(如果该服务中收到 jwt，则应向请求添加 jwt 令牌(

我没有收到警告或错误说我有循环依赖，我可以在浏览器控制台中看到拦截器正在调用服务的数千个请求，反之亦然。

处理此问题的正确方法是什么？ (最好不要在本地存储中存储 JWT(

(即使用拦截器并从服务中获取JWT(

我的服务：

....
// only showing parts that matter, HttpClient is injected here
// to be used in calling the API services
constructor(public http: HttpClient, private route: ActivatedRoute,
public translate: TranslateService, private router: Router,
public snackBar: MatSnackBar, private notification: NotificationService) {
//

我的 HttpInterceptor：

import { Observable } from 'rxjs';
import { Location } from '@angular/common';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { HttpRequest } from '@angular/common/http';
import { HttpHandler } from '@angular/common/http';
import { HttpEvent } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { DataService } from './data/data.service';
@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
constructor(private injector: Injector) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const dataService = this.injector.get(DataService);
console.log('hey there, we are here INTERCEPTOR');
if (dataService.jwt) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${dataService.jwt}`
}
});
}
return next.handle(request);
}
}

吴版

Angular CLI: 6.0.8
Node: 10.0.0
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.1.0
@angular/cli                      6.0.8
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.3.1
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Answer 1

我能够通过在服务中自己实例化 HttpClient 来解决它：

@Injectable()
export class DataService {
private http: HttpClient;
constructor(httpBackend: HttpBackend) {
this.http = new HttpClient(httpBackend);    
}
}

这在我的情况下打破了无限循环问题(使用 Angular@6.1.10(。