Angular中如何在AppModule里分别配置用户与管理员认证拦截器

首先修正你的AppModule中拦截器的配置，所有HTTP拦截器都必须设置multi: true，否则后配置的拦截器会覆盖前面的：

providers: [
  provideHttpClient(withFetch()),
  CookieService,
  MessageService,
  provideAnimations(),
  {
    provide: HTTP_INTERCEPTORS, 
    useClass: AdminAuthInterceptor,
    multi: true // 允许多个拦截器共存，必须配置
  },
  {
    provide: HTTP_INTERCEPTORS,
    useClass: UserAuthInterceptor,
    multi: true // 补上该配置，避免覆盖之前的拦截器
  }
],
bootstrap: [AppComponent]

接下来是核心逻辑：让每个拦截器只处理对应类型的请求，你需要在拦截器的intercept方法中添加判断规则，过滤出自己负责的请求：

1. 管理员拦截器（AdminAuthInterceptor） #

假设管理员请求的URL前缀为/admin/，仅处理这类请求：

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

@Injectable()
export class AdminAuthInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 判断是否为管理员专属请求
    if (request.url.startsWith('/admin/')) {
      // 插入管理员认证逻辑，比如添加管理员Token
      const modifiedReq = request.clone({
        setHeaders: {
          'Authorization': `Bearer ${yourAdminToken}`
        }
      });
      return next.handle(modifiedReq);
    }
    // 非管理员请求，直接跳过，交给后续拦截器或请求处理流程
    return next.handle(request);
  }
}

2. 用户拦截器（UserAuthInterceptor） #

同理，假设用户请求的URL前缀为/user/，仅处理这类请求：

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

@Injectable()
export class UserAuthInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 判断是否为用户专属请求
    if (request.url.startsWith('/user/')) {
      // 插入用户认证逻辑，比如添加用户Token
      const modifiedReq = request.clone({
        setHeaders: {
          'Authorization': `Bearer ${yourUserToken}`
        }
      });
      return next.handle(modifiedReq);
    }
    // 非用户请求，直接跳过
    return next.handle(request);
  }
}

其他区分方式 #

如果不通过URL前缀区分，也可以通过以下方式判断请求类型：

• 自定义请求头：比如用户请求携带X-Role: user，管理员请求携带X-Role: admin
• 请求参数/Body中的角色标识

只需将拦截器中的判断条件替换为对应逻辑即可。

内容的提问来源于stack exchange，提问作者Sarath S