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学习笔记7 原型链的原理
Jan 11 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
vue--vuex详解
2019/04/15 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
css3实现超炫风车特效
2014/11/12 HTML / CSS
Shell编程面试题
2012/05/30 面试题
护士自我评价范文
2014/01/25 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
法人任命书范本
2014/06/04 职场文书
重点工程汇报材料
2014/08/27 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
公司市场部岗位职责
2015/04/15 职场文书
家庭贫困证明
2015/06/16 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers