如何让Angular Http拦截器仅作用于特定服务或共享模块？

一、通过自定义请求头标记目标请求 #

这种方式灵活可控，只需在需要拦截的请求中添加专属标识头，拦截器根据该标识判断是否执行逻辑。

• 在目标服务的请求中添加自定义头

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

@Injectable({ providedIn: 'root' })
export class UserService {
  private interceptHeader = new HttpHeaders({ 'X-Need-Intercept': 'yes' });

  constructor(private http: HttpClient) {}

  getUser(id: number) {
    return this.http.get(`/api/users/${id}`, { headers: this.interceptHeader });
  }
}

• 在拦截器中校验头信息并处理

import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class SpecificInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 仅处理携带指定头的请求
    if (req.headers.get('X-Need-Intercept') === 'yes') {
      // 执行拦截逻辑，比如添加认证令牌
      const modifiedReq = req.clone({
        setHeaders: { 'Authorization': 'Bearer your-auth-token' }
      });
      return next.handle(modifiedReq);
    }
    // 其他请求直接放行
    return next.handle(req);
  }
}

二、为特定服务绑定专属拦截器 #

给目标服务单独配置拦截器，仅该服务发起的请求会经过此拦截器。

import { HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { SpecificInterceptor } from './specific.interceptor';

@Injectable({
  providedIn: 'root',
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: SpecificInterceptor, multi: true }
  ]
})
export class OrderService {
  constructor(private http: HttpClient) {}

  getOrders() {
    return this.http.get('/api/orders');
  }
}

配置后，OrderService的所有请求都会触发SpecificInterceptor，其他服务的请求不受影响。

三、模块级拦截（Angular 14+支持） #

如果需要给整个共享模块内的所有服务统一添加拦截逻辑，可在模块的providers中配置拦截器，仅该模块下的服务会应用此拦截器。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { SpecificInterceptor } from './specific.interceptor';
import { SharedDataService } from './shared-data.service';
import { SharedAuthService } from './shared-auth.service';

@NgModule({
  declarations: [],
  imports: [CommonModule, HttpClientModule],
  providers: [
    SharedDataService,
    SharedAuthService,
    { provide: HTTP_INTERCEPTORS, useClass: SpecificInterceptor, multi: true }
  ]
})
export class SharedBusinessModule { }

注意：模块内的服务建议在模块providers中声明，避免使用providedIn: 'root'，防止全局拦截器冲突。

内容的提问来源于stack exchange，提问作者artur shevtsov