如何在懒加载共享模块中实现Angular库的HttpInterceptor单例？

问题根源 #

1. 多实例冲突：RegisterRiskModule的根模块providers、forRoot和forChild都注册了HelloWorldInterceptor，导致创建多个实例。组件注入的是根模块providers中的实例，而实际生效的拦截器是HTTP_INTERCEPTORS注册的实例，两者不是同一个，因此设置tenantId后拦截请求时无法读取到值。
2. 无差别拦截：拦截器默认会拦截所有HTTP请求，包括主应用的请求，不符合需求。

解决方案 #

1. 确保Interceptor单例复用 #

修改register-risk.module.ts，统一Interceptor的注册逻辑，保证组件与拦截器使用同一个实例：

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
...

@NgModule({
  declarations: [
    RegisterRiskComponent
  ],
  imports: [
    ...
  ],
  exports: [
    RegisterRiskComponent
  ],
  providers: [
    // 移除此处的HelloWorldInterceptor，避免多实例
    ...
  ]
})
export class RegisterRiskModule {
  static forRoot(): ModuleWithProviders<RegisterRiskModule> {
    console.log('>>> registerRiskModule forRoot');
    return {
      ngModule: RegisterRiskModule,
      providers: [
        // 先提供单例实例
        HelloWorldInterceptor,
        // 注册拦截器时复用已有的单例
        {
          provide: HTTP_INTERCEPTORS,
          useExisting: HelloWorldInterceptor,
          multi: true,
        }
      ]
    };
  }

  static forChild(): ModuleWithProviders<RegisterRiskModule> {
    console.log('>>> registerRiskModule forChild');
    return {
      ngModule: RegisterRiskModule,
      // forChild不再注册拦截器，避免重复创建实例
      providers: []
    };
  }
}

2. 限制拦截范围，仅处理库相关请求 #

修改hello-world.interceptor.ts，添加请求过滤逻辑，只拦截库专属API：

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, } from '@angular/common/http';

@Injectable()
export class HelloWorldInterceptor implements HttpInterceptor {
  private tenantId: string;
  // 定义库需要拦截的API前缀（根据实际情况修改）
  private readonly libraryApiPrefix = '/api/register-risk';

  constructor() {
    console.log('>>> HelloWorldInterceptor constructor');
  }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 跳过主应用请求，只处理库相关API
    if (!request.url.startsWith(this.libraryApiPrefix)) {
      return next.handle(request);
    }

    console.log('>>> intercept', { 'tenantId': this.tenantId });
    if (null == this.tenantId) {
      return next.handle(request);
    }

    request = request.clone({
      setHeaders: {
        'hello-world': this.tenantId,
      },
    });

    return next.handle(request);
  }

  setTenantId(tenantId: string) {
    this.tenantId = tenantId;
    console.log('>>> setTenantId', { 'tenantId': this.tenantId });
  }
}

3. 修复组件注入的语法问题 #

补全register-risk.component.ts构造函数的大括号：

@Component({
  selector: 'app-register-risk',
  templateUrl: './register-risk.component.html',
  styleUrls: ['./register-risk.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RegisterRiskComponent implements OnChanges {
 @Input() riskRegistration: RiskRegistration;

 constructor(private helloWorldInterceptor: HelloWorldInterceptor) {}

 ngOnChanges(): void {
    const tenantId = this.riskRegistration?.tenantId;
    if (tenantId) {
      this.helloWorldInterceptor.setTenantId(tenantId);
    }
  }
}

效果验证 #

• 日志中只会出现一次HelloWorldInterceptor constructor，说明单例生效。
• 设置tenantId后，拦截库API请求时能正确读取到该值。
• 主应用的HTTP请求会被拦截器直接跳过，不会被修改请求头。

内容的提问来源于stack exchange，提问作者Muhammad Ramzan Ali