Angular Uygulamalarınızı HTTP Interceptor’lar ile Geliştirme

Angular Uygulamalarınızı HTTP Interceptor’lar ile Geliştirme

Merhaba! Ben Fatih Soysal ve bugün Angular uygulamalarınızı HTTP Interceptor’lar kullanarak nasıl daha güvenli ve sağlam hale getirebileceğinizi detaylı bir şekilde ele alacağız. Özellikle kimlik doğrulama ve hata durumlarında tekrar deneme mekanizmaları geliştirmek için Interceptor’ların ne kadar etkili olduğunu göreceksiniz. Bu teknikler, uygulamalarınızın performansını ve kullanıcı deneyimini önemli ölçüde artıracaktır.

HTTP Interceptor’lar Nedir?

Angular’daki HTTP Interceptor’lar, gelen ve giden tüm HTTP isteklerini yakalamamıza ve değiştirmemize olanak tanıyan güçlü bir araçtır. Örneğin, her istekte oturum açma token’ını eklemek veya sunucudan gelen hata durumlarında otomatik olarak tekrar deneme yapmak için Interceptor’ları kullanabiliriz. Bu sayede, aynı kodu her bir servis çağrısında tekrar yazmak zorunda kalmayız; kodumuz daha temiz ve bakımı daha kolay olur. Başka bir deyişle, Interceptor’lar, bir uygulamanın HTTP işlemlerini merkezi bir noktadan yönetmemizi sağlar.

Kimlik Doğrulama için Interceptor Kullanımı

Bir Angular uygulamasında kimlik doğrulamayı yönetmek için, her API isteğine oturum açma token’ını eklememiz gerekir. Bunun için bir Interceptor oluşturabilir ve intercept metodunu kullanarak her istekte token’ı ekleyebiliriz. Aşağıda basit bir örnek bulunmaktadır:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service'; // AuthService'inizden token'ı alacaksınız

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const token = this.authService.getToken(); // Token'ı alın
    if (token) {
      const authReq = req.clone({
        setHeaders: { Authorization: Bearer ${token} }
      });
      return next.handle(authReq);
    } else {
      return next.handle(req);
    }
  }
}

Bu Interceptor, AuthService’den token’ı alır ve Authorization header’ına ekler. Token yoksa, istek değişikliksiz bir şekilde devam eder. Bu Interceptor’ı Angular’ın modülüne eklemeniz gerekecektir.

Hata Durumlarında Tekrar Deneme Mantığı

Ağ bağlantısı sorunları veya sunucu hataları nedeniyle API istekleri başarısız olabilir. Uygulamanın kullanıcı deneyimini iyileştirmek için, Interceptor’da tekrar deneme mekanizması ekleyebiliriz. Bu mekanizma, belirli hata durumlarında isteği otomatik olarak tekrarlayabilir.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError, of, timer } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';

@Injectable()
export class RetryInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    return next.handle(req).pipe(
      retryWhen(errors => errors.pipe(
        delay(1000), // 1 saniye bekle
        take(3), // En fazla 3 kez dene
      ))
    );
  }
}

Bu Interceptor, retryWhen operatörü ile isteği belirli bir süre sonra tekrar denemeyi sağlar. take(3) ile en fazla 3 deneme gerçekleştirilir. Daha gelişmiş tekrar deneme stratejileri için üstel geri dönüş (exponential backoff) gibi teknikler kullanabilirsiniz. Bu sayede, ağ trafiğinin yoğun olduğu durumlarda sunucuya aşırı yük bindirilmesi önlenir. Unutmayın, gereksiz tekrar denemelerden kaçınmak için uygun hata kodlarını ve durumları kontrol etmeniz önemlidir.

Sonuç

HTTP Interceptor’lar, Angular uygulamalarında kimlik doğrulama ve hata yönetimi gibi ortak görevleri merkezi bir şekilde yönetmek için güçlü bir araçtır. Bu makalede ele aldığımız örnekler, Interceptor’ların uygulamanızın güvenilirliğini ve performansını nasıl artırabileceğini göstermektedir. Daha fazla bilgi ve örnek için buraya bakabilirsiniz. Ayrıca, kendi Angular projelerinizi geliştirmek için daha fazla bilgiye web sitemden ulaşabilirsiniz.

#Etiketler: Angular, HTTP Interceptor, Kimlik Doğrulama, Tekrar Deneme, Authentication, Retry, Angular HTTPClient, HTTP istekleri, hata yönetimi, performans iyileştirme, kullanıcı deneyimi