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 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
javascript常用函数(1)
Nov 04 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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中JSON数据操作
2015/07/01 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP _construct()函数讲解
2019/02/03 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
Js基础学习资料
2010/11/23 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
解决Python对齐文本字符串问题
2019/08/28 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
拉丁舞学习者的自我评价
2013/10/27 职场文书
产品包装策划方案
2014/05/18 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
领导欢迎词范文
2015/01/26 职场文书
办公室文员岗位职责
2015/02/04 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年母亲节寄语
2015/03/23 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏