Menene HTTP interceptors?

Question

Accepted Answer

**HTTP interceptors** suna zaune a tsakiyar kowane `HttpClient` buɗi/amsa, yana ba ka damar bincika su da canza su a jita. Sune wuri mafi kyau don **amfani da jita** da ya cancanci duk buɗi — auth tokens, ajiya, sarrafa kuɗi, mai nuni mai mai buɗaɗɗa.

## A aiki mai aiki (Angular na zamani)

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

Mai saɓa yana karɓa buɗi da aiki na `next` (gida na gida mai gida). Muhimmin abu, buɗaɗɗi sune **maras bada", don haka kai `.clone()` tare da canje maimakon canja. Cikakke jiya a koyaushe yana nufin duk buɓugar buɓuga a nan da nan suna dauke da auth header — ba lallai ne a maimaita a kowa aiki.

## Sarrafa mai buɗi

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

Tsere mai sarrafa sune **sarƙa**, duk daya wacce ke wucewa zuwa gida — tsari yana da mahimmanci.

## Sarrafa amsa da kuɗi a jita

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

Tundun interceptors suna ɗigon amsa Observable, kuna iya sarrafa kuɗi (m.s. sake tuɓa akan 401, nuna toast) a **gida daya** ga duk bugun bugun.

## Amfani da mai buɗi

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

## Me yasa ya fi muhimmanci

Mai saɓa yana sanya ilimi wacce sai dai ta kasance a maimaita a kowane kira na HTTP — mafi mahimmanci saɓa auth tokens da sarrafa kuɗi a jita.

Dan nanin ayyuka aikinsa sannu (suna yin buɗi ne kawai) da tabbatar da ingancin hali a bisa duni.

Auth-token da global-error interceptors kusan cikakke ne a aikikin Angular na masana'antar gida; sanin ka'ida na clone-to-modify da model na sarƙa shine tashin hankali don rubuta su daidai.