เราไปดูตัวอย่างวิธีการจัดการกับ jwt token เมื่อได้ทำการ login แล้ว

1. อันดับแรก เราก็เก็บ jwt ไว้ใน localStorage เมื่อได้ทำการ login ตามตัวอย่างด้านล่าง

this.http.post('/api/login', user)
  .subscribe((response) => {
    // Save JWT to local storage
    localStorage.setItem('token', response.headers.get('Authorization'));
  }, (error) => {
    // Handle login error
    console.log(error);
  });

จากตัวอย่างเราจะได้ token มาตอน response header ที่ชื่อ Authorization จากนั้นเราก็นำมา setItem ลงใน localStorage ที่ชื่อ token

2. เราจะสร้าง interceptor มาไว้เพื่อให้แต่ละ request สามารถส่ง token ไปยัง server ได้ ตามตัวอย่างด้านล่าง

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');

    if (token) {
      const cloned = req.clone({
        headers: req.headers.set('Authorization', token)
      });

      return next.handle(cloned);
    } else {
      return next.handle(req);
    }
  }
}

3. สุดท้ายเราจะเพิ่ม interceptor ใน module ตามตัวอย่าง

import { TokenInterceptor } from './token.interceptor';

@NgModule({
  ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    },
    ...
  ],
  ...
})
export class AppModule { }

นี่เป็นเพียงตัวอย่างง่าย ๆ ลองนำไปปรับใช้ดูครับ