vue-router权限控制(简单方式)


Posted in Javascript onOctober 29, 2018

在vue-router控制前端权限是常见需求:

  1. 有一种做法是直接在后端完成判断,提供页面列表和操作列表,在前端进行渲染,但这个方案并不优雅,前后端耦合度比较高。
  2. 比较常见的做法是把登录页面独立在router之外,专门写一个权限控制文件,在登录之后根据用户权限加载router,之后把权限作为参数传入各种组件中,以控制元素的渲染。这个方法比较合理,没有什么额外的开销,只是需要独立写一个登录页面和权限控制文件比较麻烦一些,特别是对一些小项目而言。

我们希望还有更简单的方式。这个时候梳理一下需求,我们的主要目标是:

  1. 菜单栏控制,根据权限渲染可以进入的页面菜单;
  2. 操作按钮权限控制,没有操作权限的不予显示;
  3. 如果有人通过直接点击链接或输入地址进入没有权限的页面,则进行拦截;

第一、第二个目标是容易实现的,把权限列表传入对应组件,通过v-if判断即可,需要解决的是越权页面的拦截问题。在上面常见的做法中,为了实现拦截,单独写了一个登录页面,登录之后再根据权限加载路由,这样,没有权限的路由根本不会加载,于是被导向404页面。

那么,现在的问题是,怎么样会有更简单的方式?

显然,如果我们不想单独写login页面,那么router在登录前就完成加载了。如果无法通过router自动将越权页面导向404页面,我们能做的,只能手动引导了。思路清楚了,实现起来就毫无压力:

根据vue组件的生命周期,我们可以在mounted钩子上进行权限判断,如果通过props传入的用户权限列表没有对应权限,就跳转页面到404:

mounted () {
     if (!this.check_user_privilege (current_page)) {
       this.$Message.error('权限不足');
       this.$router.push('404');
     }
 }

当然,事实上vue-router也提供了页面跳转时的钩子方法,全局的有beforeEach、afterEach等,我们希望直接在组件内使用,则可以使用beforeRouteEnter方法,在进入页面时进行判断,比如:

beforeRouteEnter (to, from, next) {
     next(vm => {
       if (!vm.check_user_privilege (current_page)) {
         vm.$Message.error('权限不足');
         vm.$router.push('404');
       }
     })
   },

具体可以参考[文档]。

当然,就这个例子来说,用vue-router提供的钩子还不如直接在mounted写判断条件,因为beforeRouteEnter方法中的next需要调用组件参数,是在mounted执行之后才执行的,而我们又经常需要在mounted钩子加载页面数据,为了避免浪费,先进行判断是比较好的。

和常用方法相比,简单方法是有额外开销的,主要在于需要完全加载路由,同时在加载页面后进行了一次判断。不过从写代码的角度来说,似乎逻辑上更节约,因为不用另外写一个集中进行权限控制的文件了,至于每个页面的权限判断,那是本来在菜单栏就要做的事情,延伸到不同页面也不算什么负担。

会不会有什么副作用呢?暂时来看似乎是没有的,如果在mounted最开始就进行页面权限判断,也不会有加载越权数据的问题,况且数据权限是后端需要单独判断的,不应该让前端去担心。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 #Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 #Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 #Javascript
简单说说angular.json文件的使用
Oct 29 #Javascript
You might like
memcache命令启动参数中文解释
2014/01/13 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
师范毕业生自我鉴定
2014/01/15 职场文书
大二自我鉴定
2014/01/31 职场文书
请假条范文大全
2014/04/10 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
小学见习报告
2015/06/23 职场文书
老干部座谈会主持词
2015/07/03 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang