Czym są interceptory HTTP?

Question

IT Interview Practice · Accepted Answer

**Interceptory HTTP** znajdują się pośrodku każdego żądania/odpowiedzi `HttpClient`, pozwalając ci globalnie sprawdzać i przekształcać je. Są idealnym miejscem na **cross-cutting concerns**, które dotyczą wszystkich żądań — tokeny auth, logowanie, obsługę błędów, wskaźniki ładowania.

## Funkcyjny interceptor (nowoczesny 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 otrzymuje żądanie i funkcję `next` (następny handler). Najważniejsze, że żądania są **immutable**, więc `.clone()` je ze zmianami zamiast mutować. Zarejestrowanie tego raz oznacza, że każde wychodzące żądanie automatycznie nosi nagłówek auth — bez powtarzania w każdej usłudze.

## Dlaczego to ważne

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

Wiele interceptorów tworzy **łańcuch**, każdy przekazuje do następnego — kolejność ma znaczenie.

## Globalna obsługa odpowiedzi i błędów

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

Ponieważ interceptory owijają również Observable odpowiedzi, możesz obsługiwać błędy (np. redirect na 401, wyświetlić toast) w **jednym miejscu** dla całej aplikacji.

## Typowe zastosowania interceptorów

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

## Dlaczego to ważne

Interceptory centralizują logikę, która w innym przypadku byłaby zduplikowana we wszystkich wywołaniach HTTP — przede wszystkim dołączanie tokenów auth i globalna obsługa błędów.

To utrzymuje usługi czystymi (one tylko tworzą żądania) i zapewnia spójne zachowanie w całej aplikacji.

Interceptory auth-token i global-error są prawie uniwersalne w produkcyjnych aplikacjach Angular; znajomość reguły clone-to-modify i modelu łańcucha jest kluczowa do ich prawidłowego napisania.

Funkcyjny interceptor (nowoczesny Angular)

Dlaczego to ważne

Globalna obsługa odpowiedzi i błędów

Typowe zastosowania interceptorów

Dlaczego to ważne

Powiązane pytania