HTTP interceptors কি?

Question

Accepted Answer

**HTTP interceptors** প্রতিটি `HttpClient` request/response এর মাঝে অবস্থান করে, যা আপনাকে সেগুলি বৈশ্বিকভাবে পরিদর্শন এবং রূপান্তর করতে দেয়। এগুলি **cross-cutting concerns** এর জন্য নিখুঁত স্থান যা সমস্ত request এ প্রযোজ্য — auth tokens, logging, error handling, loading indicators.

## একটি functional interceptor (আধুনিক 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
};
```

Interceptor request এবং একটি `next` ফাংশন (পরবর্তী handler) গ্রহণ করে। গুরুত্বপূর্ণভাবে, requests **immutable**, তাই আপনি mutation এর পরিবর্তে `.clone()` দিয়ে পরিবর্তন করেন। এটি একবার নিবন্ধন করা মানে প্রতিটি outgoing request স্বয়ংক্রিয়ভাবে auth header বহন করে — প্রতিটি service এ এটি পুনরাবৃত্তি করার প্রয়োজন নেই।

## Interceptors নিবন্ধন করা

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

একাধিক interceptors একটি **chain** গঠন করে, প্রতিটি পরবর্তীটিতে passing করে — ক্রম গুরুত্বপূর্ণ।

## Responses এবং errors বৈশ্বিকভাবে পরিচালনা করা

```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);
    })
  );
```

যেহেতু interceptors response Observable কেও মোড়ায়, আপনি errors (যেমন 401 এ redirect, toast দেখান) সম্পূর্ণ app এর জন্য **এক জায়গায়** পরিচালনা করতে পারেন।

## Interceptor এর সাধারণ ব্যবহার

```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
```

## কেন এটি গুরুত্বপূর্ণ

Interceptors logic কে কেন্দ্রীভূত করে যা অন্যথায় প্রতিটি HTTP call জুড়ে duplicated হত — সবচেয়ে গুরুত্বপূর্ণভাবে auth tokens সংযোগ করা এবং errors বৈশ্বিকভাবে পরিচালনা করা।

এটি services কে পরিষ্কার রাখে (তারা শুধুমাত্র requests করে) এবং সম্পূর্ণ app জুড়ে সামঞ্জস্যপূর্ণ আচরণ নিশ্চিত করে।

Auth-token এবং global-error interceptors production Angular apps এ near-universal; clone-to-modify rule এবং chain model জানা সেগুলি সঠিকভাবে লেখার জন্য মূল বিষয়।