Angular HTTP Interceptors

Mustafa Seker

HTTP interceptors nedir ?

HTTP interceptor, web tabanlı uygulamalarda HTTP isteklerini yakalamak, değiştirmek veya bunlara tepki vermek için kullanılan bir mekanizmadır. Bu, HTTP istekleri ve yanıtları üzerinde işlem yapmayı mümkün kılar ve uygulama geliştiricilerine isteklerin ve yanıtların akışını kontrol etme ve değiştirme imkanı sunar.

Bir HTTP interceptor, bir ağ isteğini yakalayarak isteği değiştirebilir veya gerekli durumlarda yanıtı değiştirebilir. Bu, uygulamanın istekleri otomatik olarak yetkilendirmesi, kimlik doğrulaması, hata işleme, önbelleğe alma, günlükleme veya diğer özel işlemleri gerçekleştirmesi için kullanılabilir.

HTTP interceptor’lar, özellikle modern web uygulamalarında, kullanıcı deneyimini geliştirmek ve uygulamanın güvenliğini sağlamak için yaygın olarak kullanılır. İnterceptorlar, istemci tarafı (örneğin, web tarayıcısı) veya sunucu tarafı (örneğin, sunucu uygulaması) gibi farklı bileşenlerde uygulanabilir.

Angularda HTTP Interceptor nasıl uygulanır?

Angular, HTTP interceptor’ları kullanarak HTTP isteklerini yakalamak, değiştirmek ve yanıtları işlemek için özel bir mekanizma sunar. Aşağıda, Angular’da HTTP interceptor’ları nasıl kullanabileceğinizi adım adım açıkladım.

1. Bir HTTP interceptor oluşturun: Öncelikle, bir HTTP interceptor sınıfı oluşturmanız gerekmektedir. Bu sınıf, HttpInterceptor arayüzünü uygulamalı ve intercept() yöntemini gerçekleştirmelidir. intercept() yöntemi, her HTTP isteği ve yanıtı için çağrılacak olan ana yöntemdir. İsteği değiştirebilir veya yanıtları işleyebilirsiniz.

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

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // İsteği değiştirme veya işleme yapın
    // Yanıtı döndürün veya bir işleme zincirine devam edin
  }
}

1. Interceptor’u sağlayıcı olarak kaydedin: Oluşturduğunuz interceptor’ı Angular uygulamanızda kullanabilmek için, bunu bir sağlayıcı olarak kaydetmeniz gerekmektedir. Bunun için, AppModule dosyanızda HTTP_INTERCEPTORS sabitine interceptor'ı eklemelisiniz.

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { MyInterceptor } from './path/to/my-interceptor';

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

Bu şekilde, interceptor’ınızı uygulama genelinde kullanılabilir hale getirmiş oluyoruz.

İstekleri ve yanıtları işleme: intercept() yöntemi içinde istekleri ve yanıtları yakalayabilir ve işleyebilirsiniz. İsteği değiştirmek için HttpRequest nesnesini kullanabilir ve yanıtları işlemek için HttpHandler nesnesini kullanabilirsiniz.

Bir örnekle inceleyelim:

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

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // İsteği değiştirme veya işleme yapın
    const modifiedReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer TOKEN') });

    // İsteği gönderin ve yanıtı yakalayın
    return next.handle(modifiedReq);
  }
}

HTTP Interceptor kullanırken 3 önemli handle işlemini göz önüne alalım.

1. Error Interceptor

2. Headers Interceptor

3. JWT Interceptor

Error Interceptor

Angular’da hata interceptor’ı kullanarak HTTP isteklerinde oluşan hataları yakalayabilir ve işleyebilirsiniz.

Bir örnekle inceleyelim:

1. Bir hata interceptor oluşturun: HTTP hatalarını yakalamak ve işlemek için ayrı bir interceptor sınıfı oluşturmanız gerekmektedir. Bu sınıf, HttpInterceptor arayüzünü uygulamalı ve intercept() yöntemini gerçekleştirmelidir. intercept() yöntemi, hata durumunda çağrılacak olan ana yöntemdir. Hata işleme mantığını burada uygulayabilirsiniz.

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

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        // Hata işleme mantığını burada uygulayın
        // Örneğin, hata mesajını gösterme veya loglama gibi işlemler yapılabilir
        console.log('HTTP Error:', error);
        return throwError(error);
      })
    );
  }
}

Yukarıdaki örnekte, intercept() yöntemi içinde catchError operatörünü kullanarak hataları yakalıyoruz. Ardından, hata işleme mantığını uygulayabilir ve hata durumunda hata mesajını gösterebilir veya loglayabiliriz.

1. Interceptor’u sağlayıcı olarak kaydedin: Oluşturduğunuz hata interceptor’ını Angular uygulamanızda kullanabilmek için, bunu bir sağlayıcı olarak kaydetmeniz gerekmektedir. Bunu, AppModule dosyanızda HTTP_INTERCEPTORS sabitine interceptor'ı ekleyerek yapabilirsiniz.

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { ErrorInterceptor } from './path/to/error-interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

Bu şekilde, hata interceptor’ınızı uygulama genelinde kullanılabilir hale getirmiş olursunuz.

1. Hata işleme mantığını uygulayın: intercept() yöntemi içinde hata işleme mantığınızı uygulayabilirsiniz. Hata durumunda yapılabilecek eylemler hata mesajını gösterme, loglama, kullanıcıyı yönlendirme veya özel hata sayfalarına yönlendirme gibi şeyleri içerebilir.

Bir örnekle inceleyelim:

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

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        // Hata işleme mantığını burada uygulayın
        console.log('HTTP Error:', error);

        // Özel hata işleme eylemleri yapabilirsiniz
        if (error.status === 401) {
          // Kimlik doğrulama hatası durumunda kullanıcıyı oturum açma sayfasına yönlendirme gibi işlemler yapılabilir
          // Örneğin: this.router.navigate(['/login']);
        } else if (error.status === 404) {
          // Sayfa bulunamadı hatası durumunda özel bir hata sayfasına yönlendirme gibi işlemler yapılabilir
          // Örneğin: this.router.navigate(['/error-page']);
        }

        return throwError(error);
      })
    );
  }
}

Yukarıdaki örnekte, catchError operatörünü kullanarak hataları yakalıyoruz ve özel hata işleme mantığını uyguluyoruz. Örneğin, hata durumuna göre kullanıcıyı oturum açma sayfasına veya özel bir hata sayfasına yönlendirebiliriz.

Bu şekilde, Angular uygulamanızda hata interceptor’ını kullanabilir ve HTTP isteklerinde oluşan hataları işleyebiliriz.

Headers Interceptor

Angular’da başlık (headers) interceptor’ı kullanarak HTTP isteklerinin başlıklarını yakalayabilir, değiştirebilir veya ekleyebilirsiniz.

Bir örnekte inceleyelim:

1. Bir başlık interceptor oluşturun: HTTP istek başlıklarını yakalamak ve işlemek için ayrı bir interceptor sınıfı oluşturmanız gerekmektedir. Bu sınıf, HttpInterceptor arayüzünü uygulamalı ve intercept() yöntemini gerçekleştirmelidir. intercept() yöntemi, her HTTP isteği için çağrılacak olan ana yöntemdir. Başlıkları değiştirme veya eklemeyi burada gerçekleştirebilirsiniz.

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

@Injectable()
export class HeadersInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Başlıkları değiştirme veya ekleme işlemlerini burada gerçekleştirin
    const modifiedReq = req.clone({
      setHeaders: {
        'Custom-Header': 'Value'
      }
    });

    // Değiştirilmiş isteği gönderin veya bir işleme zincirine devam edin
    return next.handle(modifiedReq);
  }
}

Yukarıdaki örnekte, intercept() yöntemi içinde clone() yöntemini kullanarak orijinal isteği kopyalıyoruz ve setHeaders özelliğini kullanarak başlık değerlerini değiştiriyoruz veya ekliyoruz.

1. Interceptor’u sağlayıcı olarak kaydedin: Oluşturduğunuz başlık interceptor’ını Angular uygulamanızda kullanabilmek için, bunu bir sağlayıcı olarak kaydetmeniz gerekmektedir. Bunu, AppModule dosyanızda HTTP_INTERCEPTORS sabitine interceptor'ı ekleyerek yapabilirsiniz.

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { HeadersInterceptor } from './path/to/headers-interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HeadersInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

Bu şekilde, başlık interceptor’ınızı uygulama genelinde kullanılabilir hale getirmiş olursunuz.

1. Başlıkları değiştirme veya ekleme işlemini uygulayın: intercept() yöntemi içinde istekleri kopyalayabilir, başlıkları değiştirebilir veya ekleyebilirsiniz.

Aşağıdaki örneği inceleyelim:

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

@Injectable()
export class HeadersInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Başlıkları değiştirme veya ekleme işlemlerini burada gerçekleştirin
    const modifiedReq = req.clone({
      setHeaders: {
        'Authorization': 'Bearer TOKEN',
        'Custom-Header': 'Value'
      }
    });

    // Değiştirilmiş isteği gönderin veya bir işleme zincirine devam edin
    return next.handle(modifiedReq);
  }
}

Yukarıdaki örnekte, clone() yöntemini kullanarak isteği kopyalıyoruz ve setHeaders özelliğini kullanarak başlıkları değiştiriyor veya ekliyoruz.

Bu şekilde, Angular uygulamanızda başlık interceptor’ını kullanabilir ve HTTP isteklerinin başlıklarını yakalayabilir, değiştirebilir veya ekleyebilirsiniz.

JWT Interceptor

JWT (JSON Web Token) interceptor, Angular uygulamalarında kullanılan bir tür HTTP interceptor’dır. JWT’ler, kimlik doğrulama ve yetkilendirme için yaygın olarak kullanılan bir standarttır. Bir JWT interceptor’ı, her HTTP isteğine otomatik olarak JWT’yi ekleyerek kimlik doğrulama işlemlerini kolaylaştırır.

Bir örnekle inceleyelim:

1. Bir JWT interceptor oluşturun: Öncelikle, bir JWT interceptor sınıfı oluşturmanız gerekmektedir. Bu sınıf, HttpInterceptor arayüzünü uygulamalı ve intercept() yöntemini gerçekleştirmelidir. intercept() yöntemi, her HTTP isteği için çağrılacak olan ana yöntemdir. Bu yöntemde, JWT'yi isteğe eklemek için gerekli işlemleri gerçekleştireceksiniz.

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // JWT'yi isteğe eklemek için gerekli işlemleri burada gerçekleştirin
    const token = 'your-jwt-token'; // JWT'nizi burada almalısınız veya oluşturmalısınız

    // JWT'yi isteğe ekleyin
    const modifiedReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    // Değiştirilmiş isteği gönderin veya bir işleme zincirine devam edin
    return next.handle(modifiedReq);
  }
}

Yukarıdaki örnekte, intercept() yöntemi içinde gelen isteği klonlayarak JWT'yi isteğe ekliyoruz. JWT'yi Authorization başlığı altında Bearer prefix'iyle gönderiyoruz.

1. Interceptor’u sağlayıcı olarak kaydedin: Oluşturduğunuz JWT interceptor’ını Angular uygulamanızda kullanabilmek için, bunu bir sağlayıcı olarak kaydetmeniz gerekmektedir. Bunun için, AppModule dosyanızda HTTP_INTERCEPTORS sabitine interceptor'ı eklemelisiniz.

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { JwtInterceptor } from './path/to/jwt-interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

Bu şekilde, JWT interceptor’ınızı uygulama genelinde kullanılabilir hale getirmiş olursunuz.

1. JWT’yi isteğe otomatik olarak ekleyin: Artık her HTTP isteği otomatik olarak JWT’yi içerecektir. Bu, kimlik doğrulama gerektiren API isteklerini kolaylaştırır. İsteği göndermeden önce JWT’nin ilgili istek başlığında mevcut olduğunu kontrol etmek önemlidir.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="makeApiCall()">API Çağrısı Yap</button>
  `
})
export class ExampleComponent {
  constructor(private http: HttpClient) {}

  makeApiCall() {
    this.http.get('https://api.example.com/data').subscribe(response => {
      // İşlemler
    });
  }
}

Yukarıdaki örnekte, HttpClient kullanarak bir API çağrısı yapıyoruz ve JWT interceptor'ı otomatik olarak JWT'yi isteğe ekleyecektir.

Bu şekilde, Angular uygulamanızda JWT interceptor'ını kullanabilir ve her HTTP isteğinde JWT'yi otomatik olarak ekleyebilirsiniz. Bu, kimlik doğrulama ve yetkilendirme için kullanılan JWT'lerin yönetimini kolaylaştırır.