Angular后端联动04，深入浅出 Angular HTTP 拦截器：统一处理 Token 与响应

在 Angular 应用开发中，HTTP 请求是与后端交互的核心环节。实际项目中，我们常常需要为所有请求统一添加认证 Token、统一处理响应错误（如 401 未授权、500 服务器错误），如果每个请求都单独处理这些逻辑，不仅代码冗余，还容易出现遗漏。Angular 的 HTTP 拦截器（HTTP Interceptor）正是为解决这类问题而生的最佳方案。

本文将手把手教你实现一个实用的 HTTP 拦截器，完成两大核心功能：

1. 为所有 HTTP 请求自动添加 Token 请求头
2. 统一捕获和处理 HTTP 响应异常

一、HTTP 拦截器核心概念

HTTP 拦截器是 Angular 提供的一种中间件机制，能够拦截应用发出的所有 HTTP 请求和响应，允许我们在请求发送前、响应返回后（或出错时）插入自定义逻辑。

拦截器基于HttpInterceptor接口实现，核心是intercept方法，该方法接收两个参数：

• req: HttpRequest<any>：待处理的请求对象（不可直接修改，需克隆后修改）
• next: HttpHandler：请求处理链路的下一个处理器

二、实现步骤

1. 环境准备

确保你的 Angular 项目已正确配置，建议使用 Angular 12 + 版本（本文示例基于 Angular 16）。

2. 创建拦截器服务

首先创建一个拦截器文件http.interceptor.ts，放在core/interceptors目录下（符合 Angular 最佳实践）：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError, catchError } from 'rxjs';
import { Router } from '@angular/router';
import { ToastService } from '../services/toast.service'; // 自定义提示服务（可替换为你的提示组件）

@Injectable()
export class HttpTokenInterceptor implements HttpInterceptor {

  constructor(
    private router: Router,
    private toastService: ToastService // 用于全局提示错误信息
  ) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 1. 请求拦截：统一添加Token请求头
    const modifiedReq = this.addTokenToRequest(request);
    
    // 2. 响应拦截：统一处理响应和错误
    return next.handle(modifiedReq).pipe(
      catchError((error: HttpErrorResponse) => this.handleResponseError(error))
    );
  }

  /**
   * 为请求添加Token请求头
   * @param request 原始请求对象
   * @returns 克隆后的新请求对象
   */
  private addTokenToRequest(request: HttpRequest<unknown>): HttpRequest<unknown> {
    // 从本地存储获取Token（实际项目中建议封装到AuthService）
    const token = localStorage.getItem('auth_token');
    
    // 如果有Token，则克隆请求并添加Authorization头
    if (token) {
      return request.clone({
        setHeaders: {
          'Authorization': `Bearer ${token}`, // JWT标准格式
          'Content-Type': 'application/json'  // 统一设置Content-Type
        }
      });
    }
    
    // 无Token则返回原始请求
    return request;
  }

  /**
   * 统一处理响应错误
   * @param error HTTP错误响应
   * @returns 抛出错误供订阅者处理
   */
  private handleResponseError(error: HttpErrorResponse): Observable<never> {
    let errorMessage = '未知错误，请稍后重试';

    // 根据错误类型分类处理
    if (error.error instanceof ErrorEvent) {
      // 客户端错误（如网络异常）
      errorMessage = `客户端错误：${error.error.message}`;
    } else {
      // 服务端错误（根据状态码处理）
      switch (error.status) {
        case 401:
          // 未授权：清除Token并跳转到登录页
          localStorage.removeItem('auth_token');
          this.toastService.error('登录已过期，请重新登录');
          this.router.navigate(['/login']);
          errorMessage = '登录已过期，请重新登录';
          break;
        case 403:
          errorMessage = '无权限访问该资源';
          break;
        case 404:
          errorMessage = '请求的资源不存在';
          break;
        case 500:
          errorMessage = '服务器内部错误，请联系管理员';
          break;
        default:
          errorMessage = `服务端错误 [${error.status}]：${error.message}`;
      }
    }

    // 全局提示错误信息
    this.toastService.error(errorMessage);
    
    // 抛出错误，让请求的订阅者也能捕获
    return throwError(() => new Error(errorMessage));
  }
}

3. 注册拦截器

创建完拦截器后，需要在 Angular 的根模块（app.module.ts）中注册，使其生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpTokenInterceptor } from './core/interceptors/http.interceptor';
import { ToastService } from './core/services/toast.service'; // 引入提示服务

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    ToastService,
    // 注册HTTP拦截器
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpTokenInterceptor,
      multi: true // 允许多个拦截器（重要！）
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 补充说明：自定义提示服务（ToastService）

上述代码中用到了ToastService，这是一个自定义的全局提示服务，你可以根据项目实际情况替换为 NG-ZORRO、PrimeNG 等 UI 库的提示组件，或实现一个简易版：

// core/services/toast.service.ts
import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; // 以ngx-toastr为例

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  constructor(private toastr: ToastrService) {}

  // 错误提示
  error(message: string): void {
    this.toastr.error(message, '错误');
  }

  // 成功提示（可选）
  success(message: string): void {
    this.toastr.success(message, '成功');
  }
}

三、高级扩展技巧

1. 排除特定请求

某些请求（如登录、注册）不需要添加 Token，可在拦截器中排除：

private addTokenToRequest(request: HttpRequest<unknown>): HttpRequest<unknown> {
  // 排除登录接口
  const excludedUrls = ['/api/auth/login', '/api/auth/register'];
  if (excludedUrls.some(url => request.url.includes(url))) {
    return request;
  }

  const token = localStorage.getItem('auth_token');
  if (token) {
    return request.clone({
      setHeaders: {
        'Authorization': `Bearer ${token}`
      }
    });
  }
  return request;
}

2. 多个拦截器的执行顺序

当注册多个拦截器时，providers数组中的顺序即为拦截器的执行顺序：

• 请求阶段：按数组顺序执行
• 响应阶段：按数组逆序执行

例如：

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: InterceptorA, multi: true }, // 先执行
  { provide: HTTP_INTERCEPTORS, useClass: InterceptorB, multi: true }  // 后执行
]

请求时：A → B → 发送请求响应时：B → A → 组件

四、注意事项

1. 请求对象不可变：HttpRequest是不可变对象，必须通过clone()方法修改后再返回。
2. 避免无限循环：拦截器中如果发起新的 HTTP 请求，务必排除该请求，否则会导致无限拦截。
3. Token 安全存储：示例中使用localStorage存储 Token，生产环境建议结合HttpOnly Cookie或加密存储。
4. 错误处理粒度：全局拦截器处理通用错误，特定请求的个性化错误仍需在订阅处单独处理。

总结

1. Angular HTTP 拦截器通过实现HttpInterceptor接口，可统一拦截请求和响应，避免重复代码。
2. 请求拦截核心是克隆HttpRequest并添加 Token 头，响应拦截通过catchError统一处理不同状态码的错误。
3. 拦截器需在根模块注册，multi: true允许注册多个拦截器，执行顺序需根据业务需求合理设置。

通过本文的实现方案，你可以快速为 Angular 项目搭建起规范的 HTTP 请求处理体系，提升代码可维护性和用户体验。