vue添加响应response拦截器,响应登陆超时处理
当Vue前端发起请求,携带者后端之前传递的tokenId,这个tokenId是有有效期的,当后端判定这个tokenId失效时,发出失效状态,前端的axios的拦截器拦截到的话,就提示前端重新登陆,另外清除前端已经登陆的客户信息。在src目录下添加一个目录——service,里面新建文件——index.js,在这当中填入代码:...
·
当Vue前端发起请求,携带者后端之前传递的tokenId,这个tokenId是有有效期的,当后端判定这个tokenId失效时,发出失效状态,前端的axios的拦截器拦截到的话,就提示前端重新登陆,另外清除前端已经登陆的客户信息。
在src目录下添加一个目录——service,里面新建文件——index.js,在这当中填入代码:
//引入vuex,后面如果tokenId过期,清除vuex中保存的登陆信息
import vuex from '../store/index';
service.interceptors.response.use(response => {
if (response.status !== 200) {
if (response.status === 500) { // 服务器断开
alert("服务器断开,请稍后重试。");
}
return Promise.reject(new Error(response.message || 'Error'))
} else {
// 清除登陆的信息,提示用户重新登陆!
if (response.data.status == "401") {
localStorage.removeItem("user");
localStorage.removeItem("tokenId");
// 清楚vuex中的值
vuex.commit("user", null);
alert(response.data.msg);
}
return response
}
}, error => {
if (error.response.status === 401) { // token失效 ,重新获取token
alert("不允许访问,请联系网站!");
} else if (error.response.status === 500) { // 服务器断开
alert("服务器断开,请稍后重试。");
} else if (error.response.status === 403) { //无auth授权,后台不允许访问
alert("不允许访问,请联系网站");
}
return Promise.reject(error)
})
export default service;
使用的话可以看上一篇文章 :
更多推荐
已为社区贡献3条内容
所有评论(0)