48. インターセプター — すべての通信に共通処理を差し込む

インターセプターは、アプリから出ていくすべてのHTTPリクエストと、返ってくるレスポンスに共通処理を差し込む仕組みです。現在は HttpInterceptorFn 型の関数として書くのが標準で、(req, next) を受け取り、リクエストを加工してから next(req) で次へ渡します。登録は provideHttpClient(withInterceptors([...])) に関数を並べるだけです。

実務での代表例は認証トークンの付与です。ログイン後のAPI呼び出しには毎回 Authorization ヘッダーが必要ですが、各コンポーネントで付けて回るのは現実的ではありません。インターセプターに1か所書けば全リクエストに自動で付きます。ほかにも、通信ログの記録、共通のエラー処理、ローディング表示の集中管理などに使われます。

つまずきやすいのは、リクエストのオブジェクトが読み取り専用(イミュータブル)である点です。req.headers に直接代入することはできず、req.clone({ setHeaders: {...} }) で複製を作って渡します。また、withInterceptors に並べた順にリクエストが通るため、ログ用と認証用など複数ある場合は順番も意識しましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { HttpInterceptorFn, provideHttpClient, withInterceptors } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

// 関数型インターセプター: すべてのリクエストに認証トークンを付ける
const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  if (!token) {
    return next(req); // トークンがなければそのまま通す
  }
  // リクエストは読み取り専用なので clone で複製して渡す
  const authed = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token },
  });
  return next(authed);
};

// withInterceptors に並べた順にリクエストが通る
bootstrapApplication(AppComponent, {
  providers: [provideHttpClient(withInterceptors([authInterceptor]))],
});

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗