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;
},