隨記

Week 06 · Day 06 — HTTP Interceptor（攔截器）

學習目標

  • 理解 Interceptor 的用途
  • 實作 JWT 攔截器自動附加 token
  • 認識請求攔截的流程

重點

Interceptor 是什麼 - 攔截進出應用的 HTTP 請求/回應 - 最常見用法：自動加上 Authorization token - 透過 HttpInterceptor 介面實作

AuthInterceptor 範例 

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>,
            next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');

    if (token) {
      req = req.clone({          // 請求不可變，用 clone 產生新版
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }

    return next.handle(req);     // 傳給下一個攔截器/後端
  }
}

註冊攔截器 

import { HTTP_INTERCEPTORS } from '@angular/common/http';

providers: [
  { provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true }   // multi: true 允許多個攔截器
]

重點觀念 - HttpRequest 不可變：要改只能 clone() - setHeaders：注入 header（不會覆蓋既有值） - next.handle(req)：接續處理（可能有其他攔截器） - multi: true：允許多個攔截器共用這個 provider

實作

  1. 建立 AuthInterceptor
  2. 讀取 localStorage 的 token 並 clone 加 header
  3. 註冊到 providers（multi: true）
  4. 用 DevTools 檢查請求是否帶上 Authorization

作業

  • 建立 JWT 攔截器自動加 token
  • 用 clone + setHeaders 修改請求
  • 註冊時使用 multi: true 並解釋原因