axios.js （捕獲token自然過期）
import axios from "axios";
import store from "@/store/index";
import router from '@/router'
import { Message } from 'element-ui';
axios.interceptors.response.use((response)=> {
if (response.data.code == 403) {
store.dispatch('loginChange',false).then(()=>{
// console.log(router.currentRoute);
let {msg="未登錄或登錄失效"} = response.data;
if(router.currentRoute.path!='/login'&&router.currentRoute.path!='/'){
Message.warning(msg);
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath,//重定向地址
}
});
}
})
} else {
return response.data;
}
}
);
router.js （捕獲地址欄跳轉(zhuǎn)）
import Vue from 'vue';
import Router from 'vue-router';
import store from "@/store/index.js"
import { URLS } from "@/config/api";
let v = new Vue();
router.beforeEach((to, from, next) => {
//驗(yàn)證用戶是否登錄洁段，如未登錄至非，跳到登錄莉擒，反之姆打。
if (!store.state.isLoginType) {
//登錄 驗(yàn)證
v.axios.get(URLS.departmentDownList).then(res => {
if (res && res.success) {
//驗(yàn)證成功
store.dispatch('loginChange', true).then(() => {
//登錄狀態(tài)下涤久，不可以跳轉(zhuǎn)到登錄界面 =>重定向
to.path === '/login' ? next({ path: '/blueprint', replace: true }) : next();
})
} else {
//驗(yàn)證失敗
//重定向登錄 跳出循環(huán)
to.path === '/login' ? next() : store.dispatch('loginChange', false).then(() => next({ path: '/login', replace: true }));
}
}).catch(err => {
//驗(yàn)證失敗
to.path === '/login' ? next() : store.dispatch('loginChange', false).then(() => next({ path: '/login', replace: true }));
})
} else {
//登錄
to.path === '/login' ? next({ path: from.path, replace: true }) : next();
}
});
store/index.js vuex
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLoginType:false,//用戶是否登錄
},
mutations: {
/*
* 更改用戶登陸狀態(tài)
*/
loginChange(state, res) {
if (res) {
state.isLoginType = true;
} else {
state.isLoginType = false;
}
},
},
actions:{
/*
* 更改用戶登陸狀態(tài)
*/
loginChange({commit},res) {
commit('loginChange', res);
},
},
})
