如何仅为子模块注册 Angular HttpInterceptor

Question

我在为 Angular 7 应用程序中的子模块注册 HttpInterceptor 时遇到问题。我的目的是只拦截和调整从子模块执行的请求。拦截器的代码如下。

import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from "@angular/common/http";
import {AuthService} from "../services/auth.service";
import {from, Observable} from "rxjs";
import {switchMap} from "rxjs/operators";
@Injectable()
export class AuthInterceptor implements HttpInterceptor
{
constructor(private authService: AuthService){}
intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>
{
return from(this.authService.get()).pipe
(
switchMap(authData =>
{
const headers = request.headers.set('Authorization', 'Bearer ' + authData.jwtAccessToken);
const requestClone = request.clone({headers});
return next.handle(requestClone);
})
);
}
}

它在其中一个子模块中注册

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {DemandDetailComponent} from "./demand-detail/demand-detail.component";
import {DemandService} from "./services/demand.service";
import {HttpClientModule, HTTP_INTERCEPTORS} from "@angular/common/http";
import {TradingRoutingModule} from "./trading-routing.module";
import {AuthInterceptor} from "../core/interceptors/http.interceptor";
@NgModule({
declarations: [
DemandDetailComponent
],
imports: [
CommonModule,
HttpClientModule,
TradingRoutingModule
],
exports: [
DemandDetailComponent
],
providers: [
DemandService,
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
})
export class TradingModule { }

拦截器在AuthService内使用，创建如下

import { Injectable } from '@angular/core';
import {AuthData} from "../model/authData";
import {HttpClient} from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class AuthService {
private authData : Promise<AuthData>;
constructor(private httpClient : HttpClient)
{
}
initialize()
{
this.authData = this.httpClient.get<AuthData>([auth-data-endpoint]).toPromise();
}
get()
{
return this.authData;
}
}

并在应用程序组合中初始化

import { Component } from '@angular/core';
import {ConfigurationService} from "./core/services/configuration.service";
import {AuthService} from "./core/services/auth.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor (private configurationService: ConfigurationService, private  authService: AuthService) {}
ngOnInit() {
this.configurationService.initialize();
this.authService.initialize();
}
}

由于某种原因，authService的初始化调用被拦截，这导致应用程序失败，因为authService尚未初始化。我在这里做错了什么？

Answer 1

导入核心模块时应该设置 HTTP 拦截器(所以在你的情况下我假设在 app.module.ts 中)，否则它将无法工作，主要是因为 HTTPClientModule 已经启动当你尝试设置拦截器时。

有关更详细的解释，请查看Angular：当HttpInterceptor不适用于延迟加载的模块时