Vue路由守卫及页面登录权限控制的设置方法(两种)
时间：2021-01-24 11:08:05 | 栏目：vue | 点击：次
①先在我们的登录页面存储一个登录数据
// 登录成功时保存一个登录状态；
sessionStorage.setItem("flag", 1);
② 添加路由守卫
方法一： 直接在路由中添加
const router = new VueRouter({ ... })
// 路由守卫
router.beforeEach((to, from, next) => {
// ...
})
方法二：当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { }）方法。
const Recruit = resolve => require(['../components/common/main/index.vue'], resolve);
export default new Router({
routes: [
// 登录
{
path: path.login.path,
name: path.login.path,
component: Login,
},
.........
③ 在路由当中添加自定义字段requireAuth，判断当前路由是否需要登录。
下图中1是设置多权限时的设置方法，下图中2是单权限设置方法
④ 在路由守卫中添加我们自己的代码逻辑。
// 路由守卫
router.beforeEach((to,from,next)=>{
let flag = sessionStorage.getItem('flag ')
if(to.meta.requireAuth == true){ // 需要登录权限进入的路由
if(!flag){ // 获取不到登录信息
next({
path: '/login'
})
}else{ // 获取到登录信息，进行下一步
return next();
}
}else{ // 不需要登录权限的路由直接进行下一步
return next();
}
})
总结