Vue 页面权限控制和登陆验证功能的实例代码


Posted in Javascript onJune 20, 2019

页面权限控制

页面权限控制是什么意思呢?

就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的。如果一个页面,有角色越权访问,这时就得做出限制了。

Vue 动态添加路由及生成菜单 这是我写过的一篇文章,

通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法。

另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限。如果有权限就让访问,没有权限就拒绝,跳转到 404 页面。

思路:

在每一个路由的 meta 属性里,将能访问该路由的角色添加到 roles 里。用户每次登陆后,将用户的角色返回。然后在访问页面时,把路由的 meta 属性和用户的角色进行对比,如果用户的角色在路由的 roles 里,那就是能访问,如果不在就拒绝访问。

代码示例:

路由信息

routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
   roles: ['admin', 'user']
  },
  component: () => import('../components/Login.vue')
 },
 {
  path: 'home',
  name: 'home',
  meta: {
   roles: ['admin']
  },
  component: () => import('../views/Home.vue')
 },
]

页面控制

// 假设角色有两种:admin 和 user
// 这里是从后台获取的用户角色
const role = 'user'
// 在进入一个页面前会触发 router.beforeEach 事件
router.beforeEach((to, from, next) => {
 if (to.meta.roles.includes(role)) {
  next()
 } else {
  next({path: '/404'})
 }
})

登陆验证

网站一般只要登陆过一次后,接下来该网站的其他页面都是可以直接访问的,不用再次登陆。

我们可以通过 token 或 cookie 来实现,下面用代码来展示一下如何用 token 控制登陆验证。

router.beforeEach((to, from, next) => {
 // 如果有token 说明该用户已登陆
 if (localStorage.getItem('token')) {
  // 在已登陆的情况下访问登陆页会重定向到首页
  if (to.path === '/login') {
   next({path: '/'})
  } else {
   next({path: to.path || '/'})
  }
 } else {
  // 没有登陆则访问任何页面都重定向到登陆页
  if (to.path === '/login') {
   next()
  } else {
   next(`/login?redirect=${to.path}`)
  }
 }
})

上述所有实现,都可以在我的 vue轻量级后台管理系统基础模板 项目里找到

总结

以上所述是小编给大家介绍的Vue 页面权限控制和登陆验证功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
javascript获取select值的方法完整实例
Jun 20 #Javascript
node基于async/await对mysql进行封装
Jun 20 #Javascript
JavaScrip数组去重操作实例小结
Jun 20 #Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 #Javascript
JavaScript命名空间模式实例详解
Jun 20 #Javascript
npm的lock机制解析
Jun 20 #Javascript
You might like
php中用数组的方法设置cookies
2011/04/21 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
python开发之函数定义实例分析
2015/11/12 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python数值基础知识浅析
2019/11/19 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
初任培训自我鉴定
2013/10/07 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
服装创业计划书范文
2014/02/05 职场文书
庐山导游词
2015/02/03 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android