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数字数组去重复项的实现代码
Dec 30 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
jquery实现轮播图效果
Feb 13 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php cli 小技巧
2013/06/03 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
php排序算法实例分析
2016/10/17 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python获取Pandas列名的几种方法
2019/08/07 Python
python文件操作的简单方法总结
2019/11/07 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
经典C++面试题一
2016/11/06 面试题
Python面试题集
2012/03/08 面试题
数控专业应届生求职信
2013/11/27 职场文书
高中课程设置方案
2014/05/28 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫