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** ਹਨ, ਇਸ ਲਈ ਤੁਸੀਂ mutation ਕਰਨ ਦੀ ਥਾਂ `.clone()` ਨਾਲ ਤਬਦੀਲੀ ਕਰਦੇ ਹੋ। ਇਸ ਨੂੰ ਇੱਕ ਵਾਰ ਰਜਿਸਟਰ ਕਰਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਹਰ ਆਉਣ ਵਾਲੀ 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);
    })
  );
```

ਕਿਉਂਕਿ 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 ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ — ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਤੌਰ ਤੇ auth tokens ਨੂੰ attach ਕਰਨਾ ਅਤੇ errors ਨੂੰ ਗਲੋਬਲ ਤੌਰ ਤੇ ਸੰਭਾਲਣਾ।

ਇਹ services ਨੂੰ ਸਾਫ ਰੱਖਦਾ ਹੈ (ਉਹ ਸਿਰਫ requests ਬਣਾਉਂਦੇ ਹਨ) ਅਤੇ ਪੂਰੀ app ਵਿੱਚ ਲਗਾਤਾਰ ਵਿਵਹਾਰ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ।

auth-token ਅਤੇ global-error interceptors production Angular apps ਵਿੱਚ ਲਗਭਗ-ਸਰਵਸਾਧਾਰਨ ਹਨ; clone-to-modify rule ਅਤੇ chain model ਨੂੰ ਜਾਣਨਾ ਉਹਨਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲਿਖਣ ਲਈ ਮੁੱਖ ਹੈ।