HTTPインターセプターとは何ですか？

Question

HTTPインターセプターとは何ですか？

Accepted Answer

**HTTPインターセプター**は、すべての`HttpClient`のリクエスト/レスポンスの中間に位置し、グローバルにそれらを検査および変換することができます。これらは、すべてのリクエストに適用される**横断的関心事** — 認証トークン、ログ、エラーハンドリング、ローディングインジケーター — に最適な場所です。

## 関数型インターセプター（最新の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`関数（次のハンドラー）を受け取ります。重要なのは、リクエストは**イミュータブル**なため、ミューテーションするのではなく変更を加えて`.clone()`する必要があります。これを一度登録すれば、送信されるすべてのリクエストが自動的に認証ヘッダーを含むようになります — 各サービスで繰り返す必要はありません。

## インターセプターの登録

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

複数のインターセプターは**チェーン**を形成し、各々が次へパスします — 順序が重要です。

## レスポンスとエラーのグローバルハンドリング

```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でリダイレクト、トーストを表示）を**1か所**でアプリ全体に対してハンドルできます。

## インターセプターの一般的な用途

```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呼び出しに渡って重複するロジックを中央化します — 最も重要なのは認証トークンの添付とグローバルエラーハンドリングです。

これにより、サービスはクリーンに保たれ（単にリクエストを行うだけ）、アプリ全体で一貫性のある動作が保証されます。

認証トークンとグローバルエラーインターセプターは、本番環境のAngularアプリではほぼ普遍的です。クローンして変更するルールとチェーンモデルを理解することが、それらを正しく記述するための鍵です。