Angular如何运行时动态添加或移除HTTP拦截器（如MsalInterceptor）

问题场景 #

我计划在应用中使用微软提供的 @azure/msal-angular 包实现基于Azure AD的SSO功能，该包提供了对应的interceptor（拦截器）。但我的应用需要支持两种运行模式：

• 第一种模式：使用msal包提供的拦截器实现SSO
• 第二种模式：不启用该拦截器，将认证请求路由到非Azure AD的其他后端服务
  我需要实现的逻辑为：当用户在运行时选择SSO模式时加载msal拦截器，未选择SSO模式时排除该拦截器。如何根据用户在登录页面的选择动态实现该需求？

补充背景：参考官方示例的app.module.ts配置，默认是通过静态依赖注入的方式引入msal interceptor，该配置会始终将HTTP请求路由到Azure AD完成认证，静态配置代码如下：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent,
    DetailComponent,
    LogoutComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatMenuModule,
    HttpClientModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

解决方案 #

Angular的HTTP拦截器会在应用初始化阶段完成依赖注入注册，应用运行过程中不支持直接移除已经注册到拦截器链中的实例，但可以通过以下两种方案实现完全等价的动态开关效果：

方案1：自定义包装拦截器做逻辑开关（改造成本最低，推荐）

不要直接将MsalInterceptor注册到全局HTTP_INTERCEPTORS列表中，而是自定义一层包装拦截器，在拦截逻辑内部根据当前用户选择的认证模式，判断是否要执行MsalInterceptor的认证处理，非SSO模式下直接放行请求即可。
实现步骤：

1. 先创建全局认证状态服务，存储用户选择的认证模式（Azure SSO/自定义认证），用户在登录页提交选择后更新该服务中的状态值。
2. 新建自定义包装拦截器，代码示例如下：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';
import { MsalInterceptor } from '@azure/msal-angular';
import { AuthModeService } from './auth-mode.service';
import { Observable } from 'rxjs';

@Injectable()
export class AppAuthInterceptor implements HttpInterceptor {
  constructor(
    private msalInterceptor: MsalInterceptor,
    private authModeService: AuthModeService
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 匹配当前认证模式
    if (this.authModeService.getAuthMode() === 'azure-sso') {
      // SSO模式下将请求转交MsalInterceptor处理
      return this.msalInterceptor.intercept(req, next);
    }
    // 非SSO模式直接放行，不触发Azure AD认证逻辑
    return next.handle(req);
  }
}

3. 修改根模块的提供商配置，替换原有直接注册MsalInterceptor的规则，同时保留MsalInterceptor自身的依赖声明：

providers: [
  // 移除原有的MsalInterceptor直接注册到HTTP_INTERCEPTORS的配置
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AppAuthInterceptor,
    multi: true
  },
  // 声明MsalInterceptor供包装拦截器注入使用
  MsalInterceptor,
  // 原有MSAL_INSTANCE、MSAL_GUARD_CONFIG、MSAL_INTERCEPTOR_CONFIG、MsalService等配置保持不变
  // ...
]

该方案不需要修改@azure/msal-angular包的原生逻辑，模式切换实时生效，不需要重启应用，适配绝大多数场景。

方案2：懒加载模块级隔离（适合两种模式业务完全拆分的场景）

如果两种认证模式对应的业务路由完全独立，可以将Azure SSO相关的所有业务拆分为独立的懒加载模块，只在该懒加载模块的providers中注册MsalInterceptor。
基于Angular多级依赖注入规则，懒加载模块中注册的HTTP拦截器仅对该模块内部发起的HTTP请求生效。用户选择非SSO模式时不会加载该懒加载模块，自然不会触发MsalInterceptor的逻辑。

注意：不要尝试在应用运行后动态修改根注入器的提供商列表，Angular不支持初始化完成后增删已注册的HTTP_INTERCEPTORS实例，强行操作会导致依赖注入容器状态异常。

内容的提问来源于stack exchange，提问作者toing