当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;

使用的话可以看上一篇文章 :

vue中给axios添加拦截器,自动携带tokenId

 

Logo

前往低代码交流专区

更多推荐