Angular - 动态包含或删除拦截器

Question

是否可以动态包含或排除拦截器？

例如，我想使用 Microsoft 的 @azure/msal-angular 包在我的应用程序中启用基于 Azure AD 的 SSO https://www.npmjs.com/package/@azure/msal-angular它提供了一个拦截器。但是，我希望我的应用程序以两种模式运行 - 一种使用基于 msal 包提供的拦截器的 SSO，另一种不使用(即将身份验证路由到其他后端服务器而不是 azure AD)。因此，如果选择了 SSO 模式，我希望包含 msal 拦截器；如果用户在运行时未选择 SSO 模式，我希望排除此拦截器。如何根据用户在登录屏幕上选择的内容动态实现此功能？更多详情如下:

下面是微软提供的示例应用程序，它使用他们的包进行身份验证 https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-sample-app

示例应用程序的

app.module.ts 具有以下包含 msal 拦截器 的方式(包含片段) 。这始终将 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 { }

Answer 1

您可以添加环境变量标志(例如 sso)，并根据其值添加 msal 提供程序。

在environment.dev.ts

export const ENVIRONMENT = {
   ..........,
   sso: false,
   ..........,
};

在environment.prod.ts

export const ENVIRONMENT = {
   ..........,
   sso: true,
   ..........,
};

在app.module.ts

const MSAL_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
]

@NgModule({
  declarations: [ ....... ],
  imports: [ ....... ],
  providers: [
    ............,
    ENVIRONMENT.sso ? MSAL_PROVIDERS : [] 
  ],
});

希望它能起作用。