Angular 5 HttpInterceptor并在头文件中发送授权令牌 [英] Angular 5 HttpInterceptor and sending Authorization Token in header
问题描述
我的流程是登录页面 - >主页。
登录页面没有令牌,登录后,服务器提供令牌,用户被重定向到主页。 / p>
主页将令牌发送到服务器,令牌被验证,服务器发回数据显示在前端。
问题:
登录请求时触发HttpInterceptor 无法读取null
的属性'token'。我想让拦截器以某种方式忽略登录api请求,并且只有在令牌存在的情况下才拦截后续调用。
你好可以在标题中使用键值来区分登录与其他请求,并创建一个拦截器来检查该键是否存在以删除令牌
从'@ angular / common / http'导入{HttpClient,HttpHeaders};
...
登录(用户名,密码){
let headers = new HttpHeaders();
headers = headers.append('noToken','noToken');
返回this.http.post(loginUrl,data,{headers:headers})
...
}
然后创建你的拦截器
导出类TokenInterceptor实现HttpInterceptor {
constructor(){}
intercept(httpReq:HttpRequest< any>,next:HttpHandler):
Observable< HttpEvent< any>> {
let headers = httpReq.headers
.set('Content-Type','application / json');
if(headers.get('noToken')==='noToken'){
headers = headers.delete('Authorization')。delete('noToken');
}
const newReq = httpReq.clone({headers:headers});
返回next.handle(newReq);
}
}
并将其添加到您的应用模块提供商
从{
提供商导入{TokenInterceptor}:[
{
提供:HTTP_INTERCEPTORS,
useClass:TokenInterceptor,
multi:true
}
]
工作解决方案
auth.interceptor.js
导出类AuthInterceptor实现HttpInterceptor {
构造函数(public auth:HouseaccountsService){}
截取(req:HttpRequest< any>,next:HttpHandler):Observable< HttpEvent< any>> {
if(req.headers.get('notoken')!=='noToken'){
req = req.clone({
setHeaders:{
授权:JSON .parse(localStorage.getItem('currentUser'))。token
}
});
}
返回next.handle(req);
}
}
服务。 ts
login(user){
let loginHeaders = {
header:new HttpHeaders({
'Content-Type':'application / json',
'noToken':'noToken'
})
}
返回this.http.post< any>(this.url +'/ login',JSON.stringify(user),loginHeaders);
}
My flow is login page -> home page.
Login page has no token, after logging in, server provides token and user is redirected to home page.
Home page sends the token to server, token is verified, server sends back data to display on front end.
Problem:
HttpInterceptor firing on login request Cannot read property 'token' of null
. I would like to have the interceptor somehow ignore the login api request and only intercept on subsequent calls if token exists.
hello you can a key value in your header to distinguish login from other requests, and create an interceptor to check if that key exist to delete the token
import { HttpClient, HttpHeaders } from '@angular/common/http';
...
login(username, password) {
let headers = new HttpHeaders();
headers = headers.append('noToken', 'noToken');
return this.http.post(loginUrl, data, {headers: headers})
...
}
then create your interceptor
export class TokenInterceptor implements HttpInterceptor {
constructor() {}
intercept(httpReq: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
let headers = httpReq.headers
.set('Content-Type', 'application/json');
if (headers.get('noToken') === 'noToken') {
headers = headers.delete('Authorization').delete('noToken');
}
const newReq = httpReq.clone({headers: headers});
return next.handle(newReq);
}
}
and add it to your app module providers
import { TokenInterceptor } from ...
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
]
Working Solution
auth.interceptor.js
export class AuthInterceptor implements HttpInterceptor {
constructor(public auth: HouseaccountsService) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if(req.headers.get('notoken') !== 'noToken') {
req = req.clone({
setHeaders: {
Authorization: JSON.parse(localStorage.getItem('currentUser')).token
}
});
}
return next.handle(req);
}
}
service.ts
login(user) {
let loginHeaders = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'noToken': 'noToken'
})
}
return this.http.post<any>(this.url + '/login', JSON.stringify(user), loginHeaders);
}
这篇关于Angular 5 HttpInterceptor并在头文件中发送授权令牌的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!