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,导致报错没有权限