Angular 2 – JWT Token Nasıl Kullanılır ?

Bu yazıda Angular 2 ve üzeri versiyonlarda giriş işlemi ve sonrasında başlatılan oturumun (session) devam ettirilmesi için yapılması gereken işlemleri anlatacağım. Angular jwt token bazlı oturum yönetiminde en rahat frameworklerden birisi diyebiliriz. Gelişmiş mimarisi ve sunduğu bir çok native özellik sayesinde oturum yönetimini pratik bir şekilde gerçekleştirebiliyoruz.

MVC yapılardan farklı olarak SPA uygulamalarında oturum yönetimi için cookie yerine JWT ve benzeri token yapıları kullanılmaktadır.

Client tarafında gönderilen HTTP isteklerinin server tarafında kimlik doğrulama işleminin yapılabilmesi için SPA uygulamalarda Authorization headeri kullanılmaktadır. Kimliğin doğrulanabilmesi için giriş işlemi sırasında kullanıcıya bir erişim tokeni (Access Token) verilmekte ve bu token kullanılarak kullanıcının kimlik doğrulama işlemi yapılmaktadır.

Bunun için öncelikle giriş işlemi yaptıktan sonra API tarafından gönderilen erişim tokeninin Local Storage üzerinde kayıt edilmesi gerekmektedir.

See the gist on github.

Sonrasında ise kaydedilen token gönderdiğimiz HTTP isteklerine eklememiz gerekmektedir. Gönderdiğimiz bütün isteklerin header bilgilerini düzenlemek oldukça fazla zaman alacağı için burada Angular2 ile birlikte gelen Interceptor yapısını kullanacağız.

Interceptor Nedir ?

Başlamadan önce interceptor nedir gelin biraz bahsedelim. Özellikle backend mimarilerinde sıkça karşımıza çıkan middleware dediğimiz yapılar vardır. Middleware yapıları ile backend tarafında gerçekleşen iki yönlü trafiği (request ve response) tek bir merkez üzerinden kontrol edebilir ve manipüle edebiliriz. Interceptorler middleware adını verdiğimiz ara katman yapılarına benzer bir mantık ile çalışmaktadır.

Angular üzerinde HttpClient ile gönderdiğimiz istekleri interceptor yardımıyla dinleyebilir, kontrol edebilir ve manipüle edebiliriz. Gönderdiğimiz bütün http isteklerine tek tek müdahele etmeden, sadece tek bir tanımlama ile merkezi bir şekilde manipülasyon gerçekleştirebiliriz.

Interpceptorler hakkında daha fazla bilgi almak isterseniz Angular Interceptor Nedir ve Nasıl Kullanılır başlıklı yazıma göz atabilirsiniz!

Interceptor Kullanarak JWT Token Nasıl Gönderilir ?

Yukarıda bahsettiğimiz üzere interceptor yapısını kullanarak request ve response üzerinde işlem gerçekleştirebiliyoruz. Gönderdiğimiz http isteklerinin head, body kısımlarda çeşitli manipülasyon yapmak mümkün. Login olduktan sonra aldığımız tokeni interceptor yardımıyla giden bütün requestlerin header kısmına rahatça tek bir hamle ile ekleyebiliyoruz.

Öncelikle interceptor oluşturmak için aşağıda yer alan cli komutunu kullanabileceğiniz gibi manuel olarak da bu dosyayı oluşturabilirsiniz. Tek yapmanız gereken dosyayı oluşturduktan sonra oluşturacağınız sınıfa HttpInterceptor arayüzünü implement etmek.

ng generate interceptor append-jwt-token

Daha sonra oluşan interceptor dosyasını açın ve aşağıda yer aldığı gibi Local Storage içerisinde yer alan JWT tokeni kullanarak gönderilen isteklerin header bilgilerini düzenleyin ve Authorization headeri ekleyin.

See the gist on github.

Daha sonra oluşturduğumuz bu interceptor sınıfını app.module.ts içerisinde yer alan AppModule sınıfının modül dekoratörü içerisinde yer alan providers bölümünde tanımlamamız gerekiyor

See the gist on github.

İşte bu kadar artık HttpClient üzerinden gönderdiğiniz bütün istekler yukarıda yer alan AppendJwtToken interceptor’üne uğrayacak ve header bilgileri yeniden düzenlenerek yeniden gönderilecektir.

Interceptorler ve angular da oturum yönetimi gördüğüz üzere oldukça kolay arkadaşlar. Elbette burada ağırlıklı olarak sadece tokeni nasıl handle edeceğimizi gösterdik ancak merak ettiğiniz başka hususlar varsa sormaktan çekinmeyin 🙂