什么是 HTTP 拦截器？

Question

什么是 HTTP 拦截器？

Accepted Answer

**HTTP interceptors** 位于每个 `HttpClient` 请求/响应的中间，让您全局地检查和转换它们。它们是处理适用于所有请求的 **cross-cutting concerns** 的完美地方 — 认证令牌、日志记录、错误处理、加载指示器。

## 一个函数式拦截器（现代 Angular）

```ts
import { HttpInterceptorFn } from "@angular/common/http";
import { inject } from "@angular/core";

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();

// requests are immutable — CLONE to modify
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }, // attach token to EVERY request
  });

return next(authReq); // pass the (modified) request along the chain
};
```

拦截器接收请求和一个 `next` 函数（下一个处理程序）。关键是，请求是 **immutable** 的，所以你用 `.clone()` 进行更改而不是直接修改。注册一次意味着每个传出请求都会自动携带认证标头 — 不需要在每个 service 中重复。

## 注册拦截器

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor, loggingInterceptor])),
  ],
});
```

多个拦截器形成一个 **chain**，每个都传递给下一个 — 顺序很重要。

## 全局处理响应和错误

```ts
import { catchError } from "rxjs/operators";
import { throwError } from "rxjs";

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err) => {
      if (err.status === 401) inject(Router).navigate(["/login"]); // global 401 handling
      inject(NotificationService).showError(err.message);
      return throwError(() => err);
    })
  );
```

由于拦截器也包装了响应 Observable，你可以在 **一个地方** 为整个应用处理错误（例如在 401 时重定向，显示 toast）。

## 常见的拦截器用途

```text
✓ Attach auth tokens to requests
✓ Global error handling (401 → login, show notifications)
✓ Logging / analytics of all HTTP traffic
✓ Show/hide a global loading spinner
✓ Add common headers, retry logic, caching
```

## 为什么这很重要

拦截器集中处理那些否则会在每个 HTTP 调用中重复的逻辑 — 最重要的是附加认证令牌和全局处理错误。

这使 service 保持整洁（它们只发起请求）并确保应用范围内的一致行为。

认证令牌和全局错误拦截器在生产 Angular 应用中几乎是通用的；了解 clone-to-modify 规则和 chain 模型是正确编写它们的关键。