Angular
ตัวอย่างการจัดการ jwt token เมื่อทำการ login ใน angular
เราไปดูตัวอย่างวิธีการจัดการกับ jwt token เมื่อได้ทำการ login แล้ว
- อันดับแรก เราก็เก็บ 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
- เราจะสร้าง 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);
}
}
}
- สุดท้ายเราจะเพิ่ม interceptor ใน module ตามตัวอย่าง
import { TokenInterceptor } from './token.interceptor';
@NgModule({
...
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
},
...
],
...
})
export class AppModule { }
นี่เป็นเพียงตัวอย่างง่าย ๆ ลองนำไปปรับใช้ดูครับ