您现在的位置:首页 >> 网页设计 >> JavaScript >> 内容

Vue路由守卫及页面登录权限控制的设置方法(两种)

时间:2020-4-1 11:35:32

  核心提示:①先在我们的登录页面存储一个登录数据?12// 登录成功时保存一个登录状态;sessionStorage.setItem('flag', 1);// 登录成功时保存一个登录状态;sessionStor...

①先在我们的登录页面存储一个登录数据

1
2
// 登录成功时保存一个登录状态;
sessionStorage.setItem("flag", 1);

② 添加路由守卫

方法一: 直接在路由中添加

1
2
3
4
5
const router = new VueRouter({ ... })
 // 路由守卫
router.beforeEach((to, from, next) => {
 // ...
})

方法二:当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to, from, next) => { })方法。

1
2
3
4
5
6
7
8
9
10
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是单权限设置方法

④ 在路由守卫中添加我们自己的代码逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 路由守卫
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();
 }
})

总结

到此这篇关于Vue路由守卫及页面登录权限控制的设置方法的文章就介绍到这了

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号