HTTP interceptor'lar nedir?

Question

Accepted Answer

**HTTP interceptor'lar** her `HttpClient` istek/yanıt ortasında oturur ve bunları küresel olarak incelemenize ve dönüştürmenize olanak tanır. **Tüm isteklere uygulanan çapraz kesme sorunları** — auth jetonları, logging, hata işleme, yükleme göstergeleri — için mükemmel yerdir.

## İşlevsel interceptor (modern 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 isteği ve `next` işlevini (sonraki işleyici) alır. Önemlisi, istekler **değişmezdir**, bu nedenle değişiklik yapmak yerine `.clone()` ile klonlayarak değiştirirsiniz. Bunu bir kez kaydetmek, her giden isteğin otomatik olarak auth başlığını taşıyacağı anlamına gelir — her serviste tekrarlamaya gerek yoktur.

## Interceptor'ları kaydetme

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

Birden fazla interceptor bir **zincir** oluşturur, her biri sonrakine geçer — sıra önemlidir.

## Yanıtlar ve hataları küresel olarak işleme

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

Interceptor'lar response Observable'ı da sarmaladığından, hataları (örneğin 401'de yönlendirme, toast gösterme) tüm uygulama için **tek bir yerde** işleyebilirsiniz.

## Yaygın interceptor kullanımları

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

## Neden önemli

Interceptor'lar, aksi takdirde tüm HTTP çağrılarında yinelenen mantığı merkezileştirir — en önemlisi auth jetonlarını eklemek ve hataları küresel olarak işlemek.

Bu, hizmetleri temiz tutar (sadece istekler yaparlar) ve uygulamanın tamamında tutarlı davranış sağlar.

Auth-token ve global-error interceptor'ları production Angular uygulamalarında neredeyse evrenseldir; clone-to-modify kuralını ve chain modelini bilmek, bunları doğru şekilde yazmanın anahtarıdır.