入口文件:
在監聽路由改變前,對token進行判斷,當需要跳轉到登錄頁時,需要帶上上一個頁面的路由信息
router.beforeEach(async (to, from, next) => {
NProgress.start();
document.title = getPageTitle(to.meta.title);
const hasToken = getToken();
let userInfo = getUserInfo();
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' });
NProgress.done();
} else {
const hasUserInfo = store.getters.userInfo;
if (hasUserInfo && hasUserInfo.length > 0) {
next();
} else {
try {
userInfo = JSON.parse(userInfo);
const accessRoutes = await store.dispatch(
'permission/generateRoutes',
userInfo.accountType
);
store.state.user.userInfo = JSON.stringify(userInfo);
router.options.routes = accessRoutes;
router.addRoutes(accessRoutes);
next({ ...to });
} catch (error) {
await store.dispatch('user/resetToken');
Message.error('Has Error', error);
next(`/login?redirect=${to.path}&query=${JSON.stringify(to.query)}`);
NProgress.done();
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next();
} else {
next(`/login?redirect=${to.path}&query=${JSON.stringify(to.query)}`);
NProgress.done();
}
}
});
在每次路由改變後,都在store中記錄下當前的路由和參數
router.afterEach((to, from) => {
if (to.path != '/login') {
store.dispatch('user/setRouteInfo', {
redirect: to.path,
query: to.query
});
}
NProgress.done();
});
request.js:
當需要在token驗證失敗時執行返回到首頁操作時:
store.dispatch('user/backLoginPage');
store/modules/user.js:
const mutation = {
SET_ROUTEINFO: (state, routeInfo) => {
state.routeInfo = routeInfo;
}
}
const actions = {
backLoginPage({ commit, dispatch, state }) {
commit('SET_TOKEN', '');
clearUserData();
resetRouter();
dispatch('tagsView/delAllViews', {}, { root: true });
let redirect = state.routeInfo ? state.routeInfo.redirect : '';
let query = state.routeInfo ? state.routeInfo.query : {};
let params = '';
params += `?redirect=${redirect}&query=${JSON.stringify(query)}`;
router.push(`/login${params}`);
},
setRouteInfo({ commit }, routeInfo) {
commit('SET_ROUTEINFO', routeInfo);
}
}
login.vue:
登錄成功後,根據記錄的數據,跳轉到指定帶參數的路由
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
this.query = route.query && route.query.query;
if (this.query) {
try {
this.query = JSON.parse(this.query);
} catch (e) {
this.query = {};
}
}
},
immediate: true
}
}
methods: {
async handleLogin() {
...
this.$router.push({
path: this.redirect || '/',
query: this.query || {}
});
}
}