如何解决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 举报,一经查实,本站将立刻删除。