Angular Interceptor’ları: Kullanım Alanları, Fonksiyonları ve Uygulama

Angular Interceptor’ları: Kullanım Alanları, Fonksiyonları ve Uygulama

Merhaba, Fatih Soysal burada. Bu yazıda, Angular’da interceptor’ların ne işe yaradığını, nasıl çalıştığını ve nasıl uygulanacağını ayrıntılı olarak ele alacağız. Interceptor’lar, Angular uygulamalarınızda istekleri yakalamak ve değiştirmek için oldukça güçlü bir araçtır. Örneğin, her HTTP isteğine bir yetkilendirme başlığı eklemek veya istek ve yanıtları günlüğe kaydetmek için kullanabilirsiniz.

Interceptor’lar Nedir ve Ne İşe Yarar?

Angular’daki interceptor’lar, HTTP istekleri ve yanıtları üzerinde işlem yapmanıza olanak tanıyan ara katmanlardır. Bir interceptor, bir HTTP isteği gönderilmeden *önce* veya bir yanıt alındıktan *sonra* çalıştırılabilir. Bu sayede, isteğe ek bilgiler ekleyebilir, yanıtlardan veri çıkarabilir veya hataları yakalayabilirsiniz. Kısacası, tüm HTTP işlemlerinizi tek bir noktadan yönetmenizi sağlarlar. Bu durum, kodunuzun daha düzenli, daha okunabilir ve daha bakımı kolay olmasını sağlar.

Örneğin, her bir isteğe bir authentication token eklemek için bir interceptor kullanabilirsiniz. Bu sayede, her servis çağrınızda token’ı manuel olarak eklemek zorunda kalmazsınız. Bunun yanı sıra, isteklerinizi günlüğe kaydetmek, hata yönetimi uygulamak veya yanıtları dönüştürmek gibi çeşitli görevler için de interceptor’lardan yararlanabilirsiniz. Sonuç olarak, interceptor’lar kod tekrarını azaltır ve uygulamanızın güvenliğini ve performansını artırır.

Bir Interceptor Nasıl Oluşturulur ve Uygulanır?

Bir interceptor oluşturmak için, HttpInterceptor arayüzünü uygulayan bir sınıf oluşturmanız gerekir. Bu sınıf, intercept metodunu içermelidir. Bu metot, her HTTP isteğini yakalar ve size isteği değiştirme veya yanıtları işlemek için bir fırsat sunar. İşte basit bir örnek:

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const authToken = localStorage.getItem('authToken'); 
    if (authToken) {
      const authReq = req.clone({
        setHeaders: {
          Authorization: Bearer ${authToken}
        }
      });
      return next.handle(authReq);
    } else {
      return next.handle(req);
    }
  }
}

Bu interceptor, local storage’dan bir authentication token alır ve bunu her isteğin Authorization başlığına ekler. Eğer token yoksa, isteği olduğu gibi geçirir. Daha sonra, bu interceptor’ı Angular’ın APP_INTERCEPTORS provider’ına eklemeniz gerekir.

import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  // ... diğer modüller ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

multi: true özelliği, birden fazla interceptor kullanabilmenizi sağlar. Bu, farklı görevler için birden fazla interceptor kullanabileceğiniz anlamına gelir. Örneğin, bir interceptor’ı loglama için, diğerini yetkilendirme için kullanabilirsiniz.

Interceptor’ların Avantajları

Interceptor’ların kullanılmasının birçok avantajı vardır. Bunlardan bazıları şunlardır:

• Kod tekrarını azaltır: Aynı işlemleri her servis çağrısında tekrar tekrar yazmak yerine, interceptor’lar sayesinde bu işlemleri tek bir yerde yönetebilirsiniz.
• Uygulamanın güvenliğini artırır: Örneğin, token’ı interceptor’da yönetmek, token’ı her servis çağrısında manuel olarak eklemekten daha güvenlidir.
• Uygulamanın bakımını kolaylaştırır: Tüm HTTP işlemlerini tek bir yerde yönetmek, uygulamanızın bakımını ve güncellemesini daha kolay hale getirir.
• Okunabilirliği ve düzenliliği artırır: Interceptor’lar sayesinde kodunuz daha düzenli ve okunabilir hale gelir.

Sonuç

Angular interceptor’ları, uygulamanızın HTTP isteklerini ve yanıtlarını yönetmek için güçlü ve esnek bir araçtır. Bu yazıda, interceptor’ların ne olduğunu, nasıl kullanılacağını ve avantajlarını öğrendiniz. Umarım bu bilgiler size yardımcı olmuştur. Daha fazla bilgi ve örnek için fatihsoysal.com sitesini ziyaret edebilirsiniz. Ayrıca, Angular’ın resmi dökümanlarını da inceleyebilirsiniz. Angular HTTP Interceptor Dokümanları

#Etiketler: Angular, Interceptor, HTTP, Angular Interceptor, HTTP Interceptor, HTTP istekleri, HTTP yanıtları, Angular HTTP, Angular geliştirme, Web geliştirme, Fatih Soysal