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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
JS数组的常用10种方法详解
May 08 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
详解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
PHP4引用文件语句的对比
2006/10/09 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python中的变量和作用域详解
2016/07/13 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
python后端接收前端回传的文件方法
2019/01/02 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
前台领班岗位职责
2013/12/04 职场文书
贷款委托书范本
2014/04/08 职场文书
政治学求职信
2014/06/03 职场文书
免职通知
2015/04/23 职场文书
荒岛余生观后感
2015/06/09 职场文书
房屋质量投诉书
2015/07/02 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python