angular中http請求驗證token

1. 普通方式

1. 建立全局服務,把token放到Authorization中

 

/**
* @description 發送請求
*/
request = (type, params, url) => {
const token = localStorage.getItem('token');
return this.http.request(type, window.API_ROOT + url, {
headers: new HttpHeaders({
'Authorization': `Token ${token}`
}),
body: params
});
}

 

 

1. 使用

 

/**
* @description 獲取用戶信息
*/
getUser() {
this.apiService.request('get', '', 'api/common/login_user').toPromise().then((res: any) => {
});
}

 

 

1. 爲了應對後端token過時問題，須要建立全局攔截器

①在app.module.ts的providers中引入攔截器文件

providers: [
{ provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }
],

 

②建立全局攔截器服務InterceptorService

export class InterceptorService implements HttpInterceptor {

constructor(private router: Router) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(catchError((err) => {
if (err.status === 401) {
this.router.navigate(['/login']);
}
return ErrorObservable.create(event);
}));
}
}

 

1. jwt驗證

 

1. 安裝jwt

npm install @auth0/angular-jwt

 

1. 修改app.module.ts文件

export function tokenGetter() {

return localStorage.getItem('token');

}

 

在import中引入

JwtModule.forRoot({

config: {

tokenGetter: tokenGetter,

whitelistedDomains: ['localhost:4200', 'test.backend.jclife.com'],

blacklistedRoutes: [],

throwNoTokenError: false

}

})

 

注意:域名必須得加入白名單中，不然http請求不會帶上token,致使報錯沒有權限