Angular 5 HTTP Client Interceptor

Merhaba,

Bu içeriğimizde, Angular uygulamalarında kullanıcılar tarafından yapılan requestler ile sunucu arasına farklı işlemleri sıkıştırmamızı ve requestin sunucuya yeni modifike edilmiş haliyle erişmesini sağlayan HTTP Client Interceptor yapısını inceliyor olacağız.

Angular 5 HTTP Client Interceptor

Yukarıdaki şemayı incelerseniz eğer clienttan gelen request, interceptor aracılığı ile modifike edilmekte ve yeni haliyle sunucuya gönderilmektedir. Bu yapı, bizlere requestler üzerinde öncelikli müdahale şansı tanımakta ve yapısal olarak birçok noktada pratik manevralar uygulamamızı sağlamaktadır.

Bu içeriğimizde Interceptor yapısına örnek olarak Token Authentication kullanılan Web Api’den elde edilen tokenı, gelecek olan tüm requestlere interceptor ile müdahalede bulunup headers özelliğine ekleyeceğimiz bir senaryo üzerinden seyredeceğiz.

İlk olarak interceptor yapısının kullanmadığı durumu inceleyelim.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Personel } from '../../models/Personel';
import { PostToken } from '../../models/PostToken';
@Injectable()
export class WebApiService {
  constructor(private httpClient: HttpClient) { }
  getList<T>(header: HttpHeaders) {
    return this.httpClient.get<T>("http://localhost:51361/api/personel/getlist", { headers: header });
  }
  getSingle(id: number, header: HttpHeaders) {
    return this.httpClient.get(`http://localhost:51361/api/personel/getsingle/${id}`, { headers: header });
  }
  post(personel: Personel, header: HttpHeaders) {
    return this.httpClient.post("http://localhost:51361/api/personel/post", personel, { headers: header });
  }
  put(personel: Personel, header: HttpHeaders) {
    return this.httpClient.put("http://localhost:51361/api/personel/getlist", personel, { headers: header });
  }
  remove(id: number, header: HttpHeaders) {
    return this.httpClient.delete(`http://localhost:51361/api/personel/delete/${id}`, { headers: header });
  }
  getToken(data: string, header: HttpHeaders) {
    return this.httpClient.post("http://localhost:51361/token", data, { headers: header });
  }
}

Yukarıdaki “WebApiService” isimli servisimiz görüldüğü üzere web apiye gerekli http metotlarını uygulamakla görevlendirilmiştir. Lakin dikkat ederseniz her bir metot parametre olarak HttpHeaders tipinde nesne almakta ve http metoduna göndermektedir.

Hatta bu servisi kullanan birkaç örnek component inceleyelim;

import { Component, OnInit } from '@angular/core';
import { Personel } from '../../../../models/Personel';
import { HttpHeaders } from '@angular/common/http';
import { WebApiService } from '../../../services/web-api.service';
@Component({
  selector: 'app-addpersonel',
  templateUrl: './addpersonel.component.html',
  styleUrls: ['./addpersonel.component.css']
})
export class AddpersonelComponent implements OnInit {
  constructor(private webApiService: WebApiService) { }
  ngOnInit() {  }
  AddPersonel(txtAd: HTMLInputElement, txtSoyAd: HTMLInputElement, txtUnvan: HTMLInputElement) {
    let personel: Personel = {
      Adi: txtAd.value,
      SoyAdi: txtSoyAd.value,
      Unvan: txtUnvan.value
    };
    const token = localStorage.getItem("token");
    const headers: HttpHeaders = new HttpHeaders({ "Authorization": `Bearer ${token}` });
    this.webApiService.post(personel, headers).subscribe(data => alert(data));
  }
}
import { Component, OnInit } from '@angular/core';
import { Personel } from '../../../../models/Personel';
import { HttpHeaders } from '@angular/common/http';
import { WebApiService } from '../../../services/web-api.service';
@Component({
  selector: 'app-personel-list',
  templateUrl: './personel-list.component.html',
  styleUrls: ['./personel-list.component.css']
})
export class PersonelListComponent implements OnInit {
  constructor(private webApiService: WebApiService) { }
  personelList: Personel[] = [];
  ngOnInit() {  }
  getList() {
    const token = localStorage.getItem("token");
    const headers: HttpHeaders = new HttpHeaders({ "Authorization": `Bearer ${token}` });
    this.webApiService.getList(headers).subscribe((data: Personel[]) => this.personelList = data);
  }
}

Gördüğünüz gibi Web Api’ye yapılan her bir request için birer headers oluşturulmakta ve bu işlem çalışılan tüm fonksiyonlar içerisinde tekrar tekrar uygulanmaktadır.

İşte bu ve buna benzer durumlarda HTTP Client Interceptor yapısı requestlere tek elden müdahale etmemizi sağlamakta ve her metotta gerçekleştirilen işlemi tek seferde halletmemize olanak tanımaktadır.

HTTP Client Interceptor yapısını oluşturabilmek için öncelikle bir class oluşturulmalı ve içerisine “@angular/common/http” dizininden “HttpInterceptor”, “HttpRequest” ve “HttpHandler” modülleri import edilmelidir.

Modülleri işlevsel olarak tanıtmamız gerekirse eğer;

  • HttpInterceptor
    Herhangi bir sınıf “HttpInterceptor” interfaceinden türetilirse “intercept” metodunu uygulatacaktır ve ilgili sınıf interceptor özelliği gösterecektir.
  • HttpRequest
    Gelen requestleri yakalamamızı sağlayan modüldür.
  • HttpHandler
    Requestin asıl hedefini tutmaktadır. Interceptor yapısının işi bittiği vakit bu modül sayesinde asıl hedefe yönlendirme sağlanmaktadır.

Bu modüllerin dışında interceptor içerisinde asenkron işlemler bittiğinde yapılacak işlemleri yönetebilmek için kullanılan “do” fonksiyonuna erişebilmek için “rxjs/add/operator/do” dizinini import etmemiz yeterlidir.

import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import "rxjs/add/operator/do";
export class AuthInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler) {
        const token = localStorage.getItem("token");
        let newRequest: HttpRequest<any>;
        if (request.url != "http://localhost:51361/token") {
            newRequest = request.clone({
                headers: request.headers.set("Authorization", `Bearer ${token}`)
            });
        } else
            newRequest = request.clone();

        return next.handle(newRequest)
            .do(
                success => console.log(success),
                error => console.log(error.message)
            );
    }
}

Evet… Yukarıdaki kod bloğunu incelerseniz eğer bir interceptor yapısı oluşturmuş bulunmaktayız. “HttpInterceptor” modülü bir interface olduğundan dolayı “AuthInterceptor” ismini verdiğimiz interceptor’a “intercept” metodunu uygulatmaktadır. Bu metot yapısal olarak “HttpRequest” ve “HttpHandler” parametrelerini almakta ve içerisinde elde edilip localStorage’e atılmış token’ı headers olarak requeste set etmektedir.

Şimdi bu oluşturduğumuz interceptor’ı projemizin ana modülünde providers olarak aşağıdaki gibi belirtmemiz gerekmektedir.

.
.
.
  providers: [WebApiService, AuthService, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }]
.
.
.

Görüldüğü üzere providers özelliğine ilgili interceptorı belirtmiş olduk. Bu işlemden sonra artık yapılacak tüm requestlerde interceptor devreye girecek ve gerekli modifikasyonu sağlayacaktır.

Artık, ne http metotlarını uygulamakla görevli servisimizdeki metotlarda header tanımlamak zorundayız, ne de tetikleme yapılan tüm metotlarda… Tek elden interceptor bizim için gerekli header tanımlamasını sağlamakta ve kullanıcılardan gelen requestlere token’ı sunmaktadır.

İlgilenenlerin faydalanması dileğiyle…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.