Τι είναι 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` (ο επόμενος handler). Κρίσιμα, τα requests είναι **immutable**, οπότε κάνετε `.clone()` με αλλαγές αντί να μεταλλάξετε. Η καταχώρηση αυτού μία φορά σημαίνει ότι κάθε εξερχόμενο request μεταφέρει αυτόματα την κεφαλίδα auth — χωρίς να την επαναλαμβάνετε σε κάθε υπηρεσία.

## Καταχώρηση interceptors

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

Πολλαπλοί interceptors δημιουργούν μια **αλυσίδα**, όπου κάθενας μεταφέρει στον επόμενο — η σειρά έχει σημασία.

## Χειρισμός responses και σφαλμάτων παγκοσμίως

```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, μπορείτε να χειρίζεστε σφάλματα (π.χ. ανακατεύθυνση στο 401, εμφάνιση toast) σε **ένα μέρος** για ολόκληρη την εφαρμογή.

## Κοινές χρήσεις interceptors

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

## Γιατί έχει σημασία

Oι interceptors κεντρικοποιούν τη λογική που διαφορετικά θα ήταν διπλή σε κάθε HTTP κλήση — πιο σημαντικά, η σύνδεση auth tokens και ο παγκόσμιος χειρισμός σφαλμάτων.

Αυτό διατηρεί τις υπηρεσίες καθαρές (απλώς κάνουν requests) και εξασφαλίζει συνεπή συμπεριφορά σε όλη την εφαρμογή.

Οι auth-token και global-error interceptors είναι σχεδόν καθολικοί σε production Angular apps· η γνώση του κανόνα clone-to-modify και του μοντέλου αλυσίδας είναι κλειδί για τη σωστή γραφή τους.