Vue路由守卫,未登录时跳转到登录界面,已登录跳转到主页
实现的功能:1.未登录时跳转到登录界面,已登录跳转到主页2.限制手动进入主页使用方法 :1.将const nextRoute数组中的路由替换成需要登录权限的路由2.isLogin是你获取到的登录状态,更改即可// 全局路由守卫router.beforeEach((to, from, next) => {// to: Route: 即将要进入的目标 ...
·
实现的功能:
1.未登录时跳转到登录界面,已登录跳转到主页
2.限制手动进入主页
使用方法 :
1.将const nextRoute数组中的路由替换成需要登录权限的路由
2.isLogin是你获取到的登录状态,更改即可
// 全局路由守卫
router.beforeEach((to, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const nextRoute = [ 'temp','editTemplate','plugin','toolList','templateList','template','workflow','workflowList','sysmanage','addWorkflow'];
let isLogin=localStorage.getItem('token');
// 未登录状态;当路由到nextRoute指定页时,跳转至login
if (nextRoute.indexOf(to.name) >= 0 && !isLogin) {
next({
path: '/login',
// 将跳转的路由path作为参数,登录成功后跳转到该路由
query: {redirect: to.fullPath}
})
}else{
next();
}
// 已登录状态;当路由到login时,跳转至home
if (to.name === 'login') {
if (isLogin) {
console.log('已登录');
router.push({ path: '/temp/index' });
}
}
});
export default router;
更多推荐
已为社区贡献1条内容
所有评论(0)