Ce sunt interceptoarele HTTP?

Question

IT Interview Practice · Accepted Answer

**Interceptoarele HTTP** stau în mijlocul fiecărei cereri/răspunsuri `HttpClient`, permițând să le inspectezi și transformi global. Sunt locul perfect pentru **cross-cutting concerns** care se aplică tuturor cererilor — tokenuri de autentificare, logging, gestionarea erorilor, indicatoare de încărcare.

## Un interceptor funcțional (Angular modern)

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

Interceptorul primește cererea și o funcție `next` (următorul handler). Critic, cererile sunt **imutabile**, deci faci `.clone()` cu modificări în loc să le muți. Înregistrarea aceasta o dată înseamnă că fiecare cerere ieșitoare poartă automat antetul auth — fără a o repeta în fiecare serviciu.

## De ce este important

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

Mai mulți interceptori formează un **lanț**, fiecare trecând la următorul — ordinea contează.

## Gestionarea răspunsurilor și erorilor global

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

Deoarece interceptorii avvolupează și Observable-ul de răspuns, poți gestiona erorile (de ex. redirecționare pe 401, afișare toast) în **un singur loc** pentru întreaga aplicație.

## Utilizări comune ale interceptoarelor

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

## De ce este important

Interceptorii centralizează logica care altfel ar fi duplicată în fiecare apel HTTP — cel mai important, atașarea tokenurilor de autentificare și gestionarea erorilor global.

Aceasta menține serviciile curate (ele doar fac cereri) și asigură comportament consistent în toată aplicația.

Interceptorii auth-token și global-error sunt aproape universali în aplicațiile Angular din producție; cunoașterea regulii clone-to-modify și a modelului de lanț este cheia pentru a le scrie corect.

Un interceptor funcțional (Angular modern)

De ce este important

Gestionarea răspunsurilor și erorilor global

Utilizări comune ale interceptoarelor

De ce este important

Întrebări conexe