HttpInterceptor->自定义服务->模块循环依赖

Question

在我的 Angular 10 应用程序中，我的核心模块包含以下 2 个服务：

1.HttpResponseInterceptor - 拦截 http 响应，如果它的状态是 401 则重定向到某个登录页面。

@Injectable()
export class HttpResponseInterceptor implements HttpInterceptor {
  constructor(private configService: ConfigService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(error => {
      if (!!error.status && error.status === 401) {
        window.location.href = this.configService.getLoginPage();
        return NEVER;
      }
      return throwError(error);
    }));
  }

2.ConfigService - 负责从文件系统加载配置文件和一些环境数据

@Injectable({providedIn: CoreModule})
export class ConfigService{
  private readonly CONFIG_URL = 'assets/cfg.json';
  public configuration: Configuration;
  public wasEnvLoaded = false;

  constructor(private httpClient: HttpClient) {
    this.loadConfigurations();
  }

  public loadConfigurations(): any {
    if (!this.configuration) {
      this.httpClient.get<Configuration>(this.CONFIG_URL).subscribe((config: Configuration) => {
          this.configuration = config;
          this.wasEnvLoaded = true;
        }
      );
    }
  }
}

和我的核心模块：

@NgModule({
  imports: [
    HttpClientModule,
  ],
  exports: [],
  providers: [ {provide: HTTP_INTERCEPTORS, useClass: HttpResponseInterceptor, multi : true}],
  declarations: []
})

export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule is already loaded. Import only in AppModule');
    }
  }
}

我实施了here 提供的解决方案，一切正常。但是，我仍然在服务和核心模块之间收到循环依赖警告。谁能解释一下为什么？

export class HttpResponseInterceptor implements HttpInterceptor {
  private loginPage: string;
  private configurationLoaderService: ConfigurationLoaderService;

  constructor(private injector: Injector) {
    setTimeout(() => {
      this.configurationLoaderService = this.injector.get(ConfigurationLoaderService);
      this.loginPage = this.configurationLoaderService.configuration.cognitoLoginURL;
    });
  } 

intercept(...){

错误：

循环错误：错误错误：无法实例化循环依赖！配置服务

Answer 1

{providedIn: CoreModule} 如果只注入到您的根模块中，它就毫无用处。只需使用{ providedIn: 'root' }，那就更好了。这将解决您的循环依赖。另一种方法是将 ConfigService 添加到模块的 providers 数组中，并从服务中删除 providedIn 对象

您的主要问题是ConfigService 使用HttpClient，但ConfigService 也用于HttpResponseInterceptor，它是从HttpClient 调用的。所以有你的循环依赖。 HttpClient 需要 ConfigService，反之亦然。

您应该将功能拆分为两个单独的类。不知道你的整个代码，我可以给你这个：

@Injectable({
  providedIn: 'root'
})
export class ConfigDataService {
  private config?: Configuration; 
 
  getLoginPage(): string {
    return this.config?.loginPage;
  }

  setConfiguration(config: Configuration): {
    this.config = config;
  } 
}

@Injectable({
  providedIn: 'root'
})
export class ConfigService{
  private readonly CONFIG_URL = 'assets/cfg.json';
  public wasEnvLoaded = false;

  constructor(private httpClient: HttpClient, private cd: ConfigDataService) {
    this.loadConfigurations();
  }

  public loadConfigurations(): any {
    if (!this.configuration) {
      this.httpClient.get<Configuration>(this.CONFIG_URL).subscribe((config: Configuration) => {
          this.cd.setConfiguration(config)
          this.wasEnvLoaded = true;
        }
      );
    }
  }
}

@Injectable()
export class HttpResponseInterceptor implements HttpInterceptor {
  constructor(private cd: ConfigDataService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(error => {
      if (!!error.status && error.status === 401) {
        window.location.href = this.cd.getLoginPage();
        return NEVER;
      }
      return throwError(error);
    }));
  }