Angular’da HTTP Interceptor Kullanımı: Veri İsteklerini Kotrol Altına Alma Rehberi

Angular, modern web uygulamaları geliştirmek için güçlü bir platformdur. Bununla birlikte, büyük ve karmaşık uygulamaları geliştirirken, dış API’lerle iletişim kurarken veya sunucudan veri alırken bazı zorluklarla karşılaşabiliriz. Bu noktada Angular’ın bize sunduğu HTTP Interceptor’lar devreye girer. Bu makalede, Angular’da interceptor’ların ne olduğunu, neden kullanıldığını ve nasıl uygulandığını öğreneceksiniz.

Interceptor Nedir?

Angular’da interceptor, HTTP isteklerini ve yanıtlarını ele almak için kullanılan bir araçtır. Bir HTTP isteği gönderilmeden önce veya yanıt alındıktan sonra bu isteği değiştirmemize veya manipüle etmemize olanak tanır. Örneğin, her isteğe otomatik olarak bir başlık eklemek veya hata durumunda özel bir işlem yapmak gibi işlevleri gerçekleştirebilir.

Neden Interceptor Kullanılır?

• Tek Bir Noktadan Kontrol: Interceptor’lar, uygulamanın farklı yerlerinde yapılan tüm HTTP isteklerini merkezi bir noktada ele almayı sağlar. Bu, kod tekrarını azaltır ve koddaki düzeni artırır.
• Güvenlik ve Yetkilendirme: İsteklerinizi güvenli hale getirmek ve yetkilendirme kontrolleri eklemek için interceptor’lar kullanabilirsiniz.
• Hata İşleme: Sunucudan hata yanıtları aldığınızda otomatik olarak özel işlemler gerçekleştirmenizi sağlar.
• Performans İyileştirmeleri: Önbellekleme gibi performans iyileştirmeleri için kullanılabilirler.

Nasıl Kullanılır?

Angular’da bir interceptor oluşturmak için öncelikle bir sınıf oluşturmanız gerekir. Bu sınıf, HttpInterceptor arayüzünü uygulamalı ve intercept metodunu içermelidir. Daha sonra, interceptor'ı sağladığınız HTTP istemci servisine eklemeniz gerekir.

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // Burada isteği manipüle edebiliriz
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer token'),
    });
    return next.handle(modifiedReq);
  }
}

Yukarıdaki kodu inceleyelim.

@Injectable()
export class MyInterceptor implements HttpInterceptor {

Bu kısım, MyInterceptor adında bir sınıf tanımlar. @Injectable() dekoratörü, sınıfın Angular enjeksiyon sistemine dahil edilebilir olduğunu belirtir. HttpInterceptor arayüzünü uygulayan bir sınıf olduğu için, interceptor'ın temel işlevselliğini sağlar.

intercept(
  req: HttpRequest<any>,
  next: HttpHandler
): Observable<HttpEvent<any>> {

Bu metod, HttpInterceptor arayüzünden gelir ve bir HTTP isteğini ele almak için kullanılır. İki parametre alır: req, işlenmesi gereken HTTP isteği ve next, işlenmiş isteği devretmek için kullanılan bir HttpHandler. Bu metodun dönüş değeri Observable<HttpEvent<any>>'dir, çünkü isteklerin sonuçlarını işlemek ve devretmek için RxJS'in Observable sınıfını kullanır.

// Burada isteği manipüle edebiliriz
const modifiedReq = req.clone({
  headers: req.headers.set('Authorization', 'Bearer token'),
});

Bu bölüm, HTTP isteğini manipüle eder. req.clone() metodu, orijinal isteği kopyalar. Ardından, bu kopyalanan isteğin başlıklarına bir Authorization başlığı ekler. Bu örnekte, bir örnek olarak "Bearer token" bir kimlik doğrulama belirtir. Bu kısmı isteğinizi isteğe göre değiştirmek için kullanabilirsiniz.

return next.handle(modifiedReq);

Bu satır, değiştirilmiş isteği next nesnesine yönlendirir. next.handle() metodu, isteği gerçekleştirmek ve yanıtı almak için kullanılır. Bu, interceptor'ın isteği değiştirmesine ve ardından değiştirilmiş isteği gerçekleştirmesine olanak tanır.

Bu şekilde, bu interceptor sınıfı, herhangi bir HTTP isteği gönderilmeden önce “Authorization” başlığını otomatik olarak ekleyecektir.

Interceptor’ı kullanmak için, providers dizininde interceptor sınıfınızı sağlamanız gerekir:

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my-interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyInterceptor,
      multi: true,
    },
  ],
})
export class InterceptorModule {}

Bu şekilde, interceptor’ınız tüm HTTP isteklerini ele alacaktır.

Angular’da interceptor kullanmak, HTTP isteklerinizi ve yanıtlarınızı kontrol altına almanın güçlü bir yoludur. Güvenlik, performans, hata işleme ve daha fazlası için interceptor’lar kullanabilir ve uygulamanızın gücünü artırabilirsiniz.

Bu makalede, interceptor’ların ne olduğunu, neden kullanıldığını ve nasıl uygulandığını öğrendiniz. Artık Angular uygulamanızda interceptor’ları kullanarak daha güvenli, daha hızlı ve daha sağlam bir kod yazabilirsiniz.