Angular Interceptors kullanımı

HTTP Interceptor yapısını inceleyip neler yapabileceğimize bakacağız.

Öncelikle interceptorları ne için kullandığımızı öğrenelim.

Interceptor sunucuya yaptığımız HTTP requestlerini yada responselarını kontrol etmemize olanak sağlar. Peki bu ne işimize yarayabilir derseniz öncelikle bir JWT yapısı düşünelim. Bu yapıda bildiğimiz gibi login olmuş kullanıcıların backend sunucusuna istek atarken header kısmında Bearer token yollaması gerekir. Peki biz service kısmında yazdığımız her requeste bunu eklemekle uğraşmalı mıyız? İşte tam bu anda interceptorslar bizim yardımımıza yetişiyor ve giden her request’in header kısmına bu tokenı ekleyebiliyoruz.

Tam aksi bir case düşünücek olursak backend sunucusundan gelen responselarda 400, 404 yada 500 gibi hata kodları aldığımızda yada success propertysi false geldiğinde bunu interceptor dosyasında kontrol edip bütün responselar için tek bir işlem yapmış oluruz.

Şimdi anlatımı bi kenara bırakıp kolları sıvayalım.

Interceptor oluşturma

Öncelikle interceptor dosyamızı oluşturalım.

ng generate interceptor

Bu kodu çalıştırdığımızda bize iterceptora isim vermemizi isteyecek. Ben ilk adım için bu interceptoru header olarak tasarlayacağım.

İşlem bittiğinde karşımızda içi boş bir interceptor dosyası oluşmuş oluyor.

şimdi bu dosyayı requestlerimizin headerında Bearer token yollayacak şekilde yapılandıralım.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { first, switchMap } from 'rxjs/operators';
import { SessionService } from '../service/session.service';
@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
  constructor(
    private readonly session: SessionService,
  ) {
  }
  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.session.token$.pipe(first(), switchMap(token => {
      if (token) {
        request = this.setToken(request, token.token);
      }
      return next.handle(request);
    }));
  }
  private setToken<T>(request: HttpRequest<T>, accessToken: string): HttpRequest<T> {
    return request.clone({
      setHeaders: {
        Authorization: `Bearer ${accessToken}`
      },
    });
  }
}

Kısaca bu dosyada session.service in içinden gelen auth tokenimizi eğer token varsa bütün requestlere ekliyoruz.

Error interceptoru

Şimdi ise yukardaki adımları tekrarlayarak bir error interceptor dosyası oluşturalım ve bu dosyayıda sunucudan gelen hataları yakalayıp kullanıcıya geribildirim yapacak şekilde tasarlayalım.

import {
  HttpErrorResponse,
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpResponse,
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { MatSnackBar } from "@angular/material/snack-bar";
import { Observable, throwError } from "rxjs";
import { catchError, tap } from "rxjs/operators";
@Injectable({ providedIn: "root" })
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private readonly _snackBar: MatSnackBar) {}
  public intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      tap((res) => {
        const body: any = (res as HttpResponse<any>).body;
        if (body && body.success === false && body.messageDescription) {
          this._snackBar.open(body.messageDescription, "", {
            duration: 4000,
            panelClass: "error-response",
            verticalPosition: "top",
            horizontalPosition: "end",
          });
        }
      }),
      catchError((event: HttpErrorResponse) => {
        if (event.status === 401) {
          return throwError(event);
        }
        if (event.status === 417 || event.status === 401) {
          this._snackBar.open("Lütfen tekrar giriş yapın", "", {
            duration: 4000,
            panelClass: "error-response",
            verticalPosition: "top",
            horizontalPosition: "end",
          });
          return throwError(event);
        }
        this._snackBar.open("Bilinmeyen Hata !!", "", {
          duration: 4000,
          panelClass: "error-response",
          verticalPosition: "top",
          horizontalPosition: "end",
        });
        return throwError(event);
      })
    );
  }
}

Bu dosyada birden fazla kontrol mekanizması var. İlk adımda responseun içinden gelen bilgilere göre bir karşılaştırma varken diğer yandan status code a göre bir karşılaştırma mevcut.