项目中接口使用Token
2019-08-07 本文已影响0人
咔簌
请求登录接口后将需要的凭证保存在localStorage中(如:token)
localStorage.setItem("token", res.data.token);
在封装http工具类,请求拦截器时将token 设置到请求头部中
service.interceptors.request.use(
(config:AxiosRequestConfig)=>{
if (localStorage.token) {
config.headers.Authorization = localStorage.token;
}
return config;
},
(err:any)=>{
Promise.reject(err)
}
)
响应拦截器如果是返回401错误,则将localStorage中的token 移除掉
service.interceptors.response.use(
(response:AxiosResponse)=>{
return response
},
(err:any)=>{
let errMsg = '';
if (err && err.response.status) {
switch (err.response.status) {
case 401:
errMsg = '登录状态失效,请重新登录';
localStorage.removeItem('token');
router.push('/login');
break;
default:
errMsg = err.response.data.msg;
break;
}
}else{
errMsg = err;
}
Message.error(errMsg);
return Promise.reject(errMsg);
}
)
如果有退出登录功能,就在请求后将其移除
localStorage.removeItem("token");