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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
Javascript实现的StopWatch功能示例
Jun 13 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
详解python的argpare和click模块小结
2019/03/31 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python学习笔记之多进程
2020/08/06 Python
Python编写万花尺图案实例
2021/01/03 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
向国旗敬礼活动总结
2014/09/27 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2016国庆促销广告语
2016/01/28 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技