Angular 使用全局拦截器

Question

我想全局使用 2 个拦截器（httpInterceptorProviders、jwtInterceptorProviders），但它在我的惰性模块中不起作用。我有 CoreModule 和 X 延迟加载模块。奇怪的是，我有一个由 swagger 生成器（http 服务）自动生成的代码，该调用被拦截，但是当我使用自定义 http 服务拦截器时，不会拦截该请求。

Index.ts 我在哪里获取提供程序

/** Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true }
];

export const jwtInterceptorProviders = [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
];

CoreModule，我在提供程序中导入拦截器

/** Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true }
];

export const jwtInterceptorProviders = [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
];

应用程序模块

@NgModule({
  declarations: [AppComponent, NavigationComponent, ErrorsComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    SharedModule,
    AppRoutingModule,
    AuthModule,
    ThemeModule.forRoot(),
    CoreModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

拦截器

@NgModule({
  imports: [
    // angular
    CommonModule,
    HttpClientModule,
    // ngrx
    StoreModule.forRoot(reducers, { metaReducers }),
    StoreRouterConnectingModule.forRoot(),
    EffectsModule.forRoot([AuthEffects, GoogleAnalyticsEffects]),
    environment.production
      ? []
      : StoreDevtoolsModule.instrument({
          name: "Angular NgRx Material Starter"
        }),

    // 3rd party
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    ApiModule.forRoot(() => {
      return new Configuration({
        basePath: `${environment.HOST}:${environment.PORT}`,
        apiKeys: { Authorization: "" }
      });
    })
  ],
  declarations: [],
  providers: [
    LocalStorageService,
    AuthGuardService,
    AnimationsService,
    TitleService,

    // retryHttpInterceptorProviders,
    { provide: ErrorHandler, useClass: AppErrorHandler },
    httpInterceptorProviders,
    jwtInterceptorProviders,
    { provide: RouterStateSerializer, useClass: CustomSerializer },
    {
      provide: HAMMER_LOADER,
      useValue: () => new Promise(() => {})
    },
    AnalyticsService,
    LayoutService,
    StateService,
    PetsServiceWithUpload
  ],
  exports: [TranslateModule]
})
export class CoreModule {
  constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule
  ) {
    if (parentModule) {
      throw new Error("CoreModule is already loaded. Import only in AppModule");
    }
  }
}

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(
    http,
    `${environment.i18nPrefix}/assets/i18n/`,
    ".json"
  );
}

延迟加载模块

@NgModule({
  declarations: [AppComponent, NavigationComponent, ErrorsComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    SharedModule,
    AppRoutingModule,
    AuthModule,
    ThemeModule.forRoot(),
    CoreModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

如果我在 petsModule 中导出我的 2 个拦截器，它会拦截请求，但我只想在核心模块中导入它一次。我检查了这个 stackblitz https://stackblitz.com/edit/angular-http-interceptor-working-for-lazy-loaded-module?file=src/app/core/token-interceptor.service.ts并确保我仅在我的核心模块中导入 HttpClientModule 。

Answer 1

为了全局使用拦截器并且提供程序位于核心模块中，应在拦截器顶部添加 @Injectable({providedIn: 'root' })，如下所示 https://stackblitz.com/edit/angular-http-interceptor-working-for -lazy-loaded-module?file=src/app/core/token-interceptor.service.ts