Angular：库模块中声明的HttpInterceptor拦截库外的请求

问题描述

我在 Angular 中遇到了一个问题，即在 Angular 库中声明的 HttpInterceptors 的实现实例正在拦截对库外（即消费应用程序）进行的 HttpClient 调用的请求。

我正在努力理解为什么会发生这种情况。

HTTP_INTERCEPTOR 注入是在我的库的模块声明中配置的，而不是我的应用程序。

我的设置如下：

我将 ng-mfe 库模块声明如下：

import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS,HttpClientModule } from '@angular/common/http';
import { ModuleWithProviders,NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';
import { ConfigToken } from './tokens';
import { AuthHttpClient } from './services/auth/auth-http.service';
import { Config } from './models/module.model';
import { NgSelectModule } from '@ng-select/ng-select';
import { TokenInterceptor } from './services/auth/token.interceptor';

const components = [/* components */];
const imports = [CommonModule,HttpClientModule,NgSelectModule,FormsModule,ReactiveFormsModule];

@NgModule({
  declarations: [...components],imports: [...imports],exports: [...components],providers: [],})
export class NGMfeModule {
  static forRoot(config: Config): ModuleWithProviders<NGMfeModule> {
    return {
      ngModule: NGMfeModule,providers: [
        AuthHttpClient,TokenInterceptor,{
          provide: ConfigToken,useValue: config,},{
          provide: HTTP_INTERCEPTORS,useClass: TokenInterceptor,multi: true,],};
  }
}

此库处理 API 的 HTTP 请求，并附加与该 API 通信所需的相关身份验证标头。

我已经实现了一个 HttpInterceptor (TokenInterceptor) 并提供了 HTTP_INTERCEPTORS 注入令牌。

import { HttpEvent,HttpHandler,HttpInterceptor,HttpRequest } from '@angular/common/http';
import { Inject,Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { filter,map,switchMap } from 'rxjs/operators';
import { selectAccesstoken } '../../state/shared-config/shared-config.selectors';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private store: Store) {}

  /**
   * Intercept all HTTP requests and add the required auth headers to them
   *
   * @param req The request to intercept
   * @param next Transform HttpRequests into a stream
   */
  intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
    return this.store.select(selectAccesstoken).pipe(
      filter((data) => !!data),switchMap((data) => {
        req = req.clone({
          setHeaders: {
            Authorization: `Bearer ${data}`,});

        return next.handle(req);
      })
    );
  }
}

最后，我的AuthHttpClient：

import { HttpClient } from '@angular/common/http';
import { HttpOptions } from '../../models/http.model';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class AuthHttpClient {
  constructor(private http: HttpClient) {}

  get(url: string,options?: HttpOptions): Observable<Object> {
    return this.http.get(url,options);
  }
}

这是库配置，我的Angular应用程序库外的模块是 如下：

import { NGMfeModule } from 'ng-mfe';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { browserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [AppComponent],imports: [
    browserModule,AppRoutingModule,NGMfeModule.forRoot(/* config */),bootstrap: [AppComponent],})
export class AppModule {}

最后，在我的 AppComponent 类中，我注入了两个服务，一个是我的 AuthHttpClient，另一个是 Angular 的 HttpClient：

import { Component,OnInit } from '@angular/core';
import { AuthHttpClient,getAccesstoken } from 'ng-mfe';

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],})
export class AppComponent implements OnInit {
  constructor(
    private http1: AuthHttpClient,private http2: HttpClient
  ) {}

  ngOnInit() {
    this.http1.get('test-url-1').subscribe();
    this.http2.get('test-url-2').subscribe();
  }
}

我希望 http1 发出的调用被拦截，因为它是 AuthHttpClient 中声明的 ng-mfe 实例，但 http2 是 Angular 的实例HttpClient - 并且 HttpClientModule 在 AppModule 中导入。

也许我对 Angular 单例的理解是错误的 - 但是为什么 http2 的请求会被拦截？我的设置是否错误（有没有办法正确配置我的模块，以免发生这种情况）？或者这是正确的标准行为吗？

我以前在我的 Injectable({ providedIn: 'root' }) 和 AuthHttpClient 服务中有 TokenInterceptor，但没有在 providers 的 NGMfeModule 数组中声明它们，但删除了这些，因此它们在本地声明.但它没有任何区别。这是正确的，还是应该始终为 providedIn: root？

感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）