如何使一个角模块忽略 http 拦截器添加在一个核心模块

我确实有一个带有 HttpInterceptor 的核心模块用于授权处理,我在 AppModule 包含了这个模块,这样所有其他使用 HttpClient 的模块都在使用这个拦截器。

@NgModule({
imports: [],
declarations: [],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
},
]
})
export class CoreModule { }

如何使模块绕过默认拦截器?

@NgModule({
imports: [
CommonModule
],
declarations: components,
providers: [CustomService],
exports: components,
})
export class ModuleWithoutInterceptorModule { }
64656 次浏览

You can use HttpBackend.

Example:

import { HttpClient, ..., HttpBackend } from '@angular/common/http';


@Injectable()
export class TestService {


private httpClient: HttpClient;


constructor( handler: HttpBackend) {
this.httpClient = new HttpClient(handler);
}
....

In this way the service is not intercepted by AuthInterceptor.

Per this suggestion on GitHub, we've implemented a simple header to identify requests that shouldn't be intercepted. In the interceptor:

export const InterceptorSkipHeader = 'X-Skip-Interceptor';


@Injectable()
export class SkippableInterceptor implements HttpInterceptor {


intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.headers.has(InterceptorSkipHeader)) {
const headers = req.headers.delete(InterceptorSkipHeader);
return next.handle(req.clone({ headers }));
}


...  // intercept
}


}

Then whenever you want to skip the interception for a particular request:

const headers = new HttpHeaders().set(InterceptorSkipHeader, '');


this.httpClient
.get<ResponseType>(someUrl, { headers })
...

Note that with this method the service, not the interceptor, is choosing when the interceptor's logic gets applied; this means that the services must "know" something about the interceptors in your application. Depending on your use case, it might be better to make the interceptors decide when to apply the logic.

In order to bypass all interceptors we can use HttpBackend as @deg suggested.

In other cases we can create HttpClient factory that will allows us to exclude interceptors from the interceptors chain:

import { createHttpClient } from './http-client.factory';
// ...


@Injectable({
providedIn: 'root'
})
export class TodosApiService {
http = createHttpClient(this.injector, [Interceptor2]);
//                                        ^^^^^^^^^^^^
//                                    Interceptors to exclude


constructor(private injector: Injector) { }


getTodo() {
// Interceptor2 will be bypassed
return this.http.get('https://jsonplaceholder.typicode.com/todos')
}
}

Ng-run Example

Note that you can reuse this logic by creating base class:

@Injectable()
export class BasicHttpClient {
protected http = createHttpClient(this.injector, [Interceptor2]);


constructor(private injector: Injector) { }
}


@Injectable({ providedIn: 'root' })
export class TodosApiService extends BaseHttpClient {


getTodo() {
// Interceptor2 will be bypassed
return this.http.get('https://jsonplaceholder.typicode.com/todos')
}
}

http-client.factory.ts

import {
HTTP_INTERCEPTORS,
HttpBackend,
HttpClient,
HttpEvent,
HttpHandler,
HttpInterceptor,
HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injector, Type } from '@angular/core';


class HttpInterceptorHandler implements HttpHandler {
constructor(private next: HttpHandler, private interceptor: HttpInterceptor) {}


handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
return this.interceptor.intercept(req, this.next);
}
}


class HttpInterceptingHandler implements HttpHandler {
private chain: HttpHandler | null = null;


constructor(
private backend: HttpBackend,
private injector: Injector,
private interceptorsToExclude: Type<HttpInterceptor>[],
private intercept?: (req: HttpRequest<any>) => HttpRequest<any>
) {}


handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
if (this.intercept) {
req = this.intercept(req);
}


if (this.chain === null) {
const interceptors = this.injector
.get(HTTP_INTERCEPTORS, [])
.filter(
interceptor => !this.interceptorsToExclude.some(interceptorType => interceptor instanceof interceptorType)
);


this.chain = interceptors.reduceRight(
(next, interceptor) => new HttpInterceptorHandler(next, interceptor),
this.backend
);
}
return this.chain.handle(req);
}
}


export function createHttpClient(
injector: Injector,
excludedInterceptors: Type<HttpInterceptor>[],
intercept?: (req: HttpRequest<any>) => HttpRequest<any>
) {
return new HttpClient(
new HttpInterceptingHandler(injector.get(HttpBackend), injector, excludedInterceptors, intercept)
);
}