入口文件:
在监听路由改变前,对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 || {}
});
}
}