vue添加响应response拦截器，响应登陆超时处理

当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