HTTP interceptors म्हणजे काय?

Question

Accepted Answer

**HTTP interceptors** हे प्रत्येक `HttpClient` request/response च्या मध्यभागी राहतात, ज्यामुळे तुम्हाला त्यांना विश्वव्यापीरित्या तपासणी करता आणि बदलता येते. ते **cross-cutting concerns** साठी परिपूर्ण जागा आहेत जे सर्व requests ला लागू होतात — 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` function (पुढील handler) मिळतात. महत्वाचे म्हणून, requests **immutable** आहेत, म्हणून तुम्ही बदलांसह `.clone()` करता, बदलून देत नाही. हे एकदा नोंदणी केल्याने प्रत्येक outgoing request स्वयंचलितपणे auth header वाहून नेते — प्रत्येक service मध्ये ते पुनरावृत्ती करण्याची आवश्यकता नाही.

## Interceptors नोंदणी करणे

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

अनेक interceptors एक **chain** तयार करतात, प्रत्येक पुढील्यालाच पास करतात — क्रम महत्वाचा आहे.

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

इंटरसेप्टर 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 तर्कशास्त्र केंद्रित करतात जे अन्यथा प्रत्येक HTTP कॉलमध्ये डुप्लिकेट केले जाईल — सर्वांत महत्वाचे म्हणून auth tokens जोडणे आणि errors विश्वव्यापीरित्या हाताळणे.

हे services स्वच्छ ठेवते (ते फक्त requests करतात) आणि संपूर्ण app मध्ये सुसंगत वर्तन सुनिश्चित करते.

Auth-token आणि global-error interceptors हे production Angular apps मध्ये जवळ-सार्वत्रिक आहेत; clone-to-modify नियम आणि chain मॉडेल समजून घेणे त्यांना बरोबर लिहिण्याचा मुख्य आहे.