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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 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类的使用 实例代码讲解
2009/12/28 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
vue实例的选项总结
2020/06/09 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
教师竞聘演讲稿
2014/05/16 职场文书
世界读书日的活动方案
2014/08/20 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers