vue中token丢失弹出登录窗口

用 axios response 拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。

安装axios :npm i axios

在 main.js 注册 axios

// http 请求拦截器
axios.interceptors.request.use(
config => {
if (VueCookies.isKey("token")) {
config.headers.common["token"] = VueCookies.get("token");
config.headers["Cache-Control"] = "no-store"; //清除浏览器缓存
config.headers["Pragma"] = "no-cache"; //清除浏览器缓存
store.commit("changeLogin", true);
}
return config;
},
err => {
return Promise.reject(err);
}
);

// http 响应 拦截器
axios.interceptors.response.use(
response => {
if (response.data.code === "-3") {
store.commit("changePop", true);
}
if (response.data.code === "401") {
router.go(-1);
Message.error(response.data.msg);
} else if (response.data.code == "200") {
return Promise.resolve(response);
} else if (response.data.code == "NOT_LOGIN") {
Message.error(response.data.msg);
store.commit("changePop", true);
} else if (response.data.code == "400") {
return Promise.resolve(response);
} else {
Message.error(response.data.msg);
return Promise.reject(response);
}
},
error => {
if (error.response) {
Message.error("服务器连接失败");
}
return Promise.reject(error.response.data);
// 返回接口返回的错误信息
}
);

红色部分为全局变量 

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
token: "",
iflogin: false,
ifpop: false
};
const mutations = {
changeToken(state, str) {
state.token = str;
window.sessionStorage.setItem("token", str);
},
changeLogin(state, str) {
state.iflogin = str;
window.sessionStorage.setItem("iflogin", str);
},
changePop(state, str) {
state.ifpop = str;
},
};
const actions = {

};
const store = new Vuex.Store({
state: state,
mutations: mutations,
actions: actions
});

export default store;

登录窗口

<el-dialog
title
:visible.sync="ifLoginShow"
:close-on-click-modal="false"
:before-close="handleDialogClose"
width="30%"
center
> </el-dialog>

ifLoginShow() {
return this.$store.state.ifpop;
},