HTTP interceptor là gì?

Question

Accepted Answer

**HTTP interceptor** nằm ở giữa mọi request/response của `HttpClient`, cho phép bạn kiểm tra và biến đổi chúng một cách toàn cục. Chúng là nơi hoàn hảo cho các **mối quan tâm cắt ngang (cross-cutting)** áp dụng cho tất cả request — token xác thực, logging, xử lý lỗi, chỉ báo loading.

## Một functional interceptor (Angular hiện đại)

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

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

// request là bất biến (immutable) — CLONE để sửa đổi
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }, // gắn token vào MỌI request
  });

return next(authReq); // chuyển request (đã sửa đổi) đi tiếp trong chuỗi
};
```

Interceptor nhận request và một hàm `next` (handler tiếp theo). Quan trọng là request **bất biến**, nên bạn `.clone()` kèm thay đổi thay vì mutate. Đăng ký cái này một lần nghĩa là mọi request đi ra tự động mang header xác thực — không phải lặp lại nó trong từng service.

## Đăng ký interceptor

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

Nhiều interceptor tạo thành một **chuỗi**, mỗi cái chuyển sang cái tiếp theo — thứ tự quan trọng.

## Xử lý response và lỗi toàn cục

```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"]); // xử lý 401 toàn cục
      inject(NotificationService).showError(err.message);
      return throwError(() => err);
    })
  );
```

Vì interceptor cũng bọc Observable response, bạn có thể xử lý lỗi (ví dụ chuyển hướng khi 401, hiện toast) tại **một nơi** cho toàn bộ ứng dụng.

## Các công dụng phổ biến của interceptor

```text
✓ Gắn token xác thực vào request
✓ Xử lý lỗi toàn cục (401 → login, hiện thông báo)
✓ Logging / analytics cho toàn bộ lưu lượng HTTP
✓ Hiện/ẩn một spinner loading toàn cục
✓ Thêm header chung, logic retry, caching
```

## Tại sao điều này quan trọng

Interceptor tập trung hóa logic mà nếu không sẽ bị lặp lại trên mọi lệnh gọi HTTP — quan trọng nhất là gắn token xác thực và xử lý lỗi toàn cục.

Điều này giữ các service sạch sẽ (chúng chỉ thực hiện request) và đảm bảo hành vi nhất quán toàn ứng dụng.

Interceptor token-xác-thực và lỗi-toàn-cục gần như phổ biến trong các ứng dụng Angular production; biết quy tắc clone-để-sửa và mô hình chuỗi là then chốt để viết chúng đúng cách.