vue-router 权限控制的示例代码


Posted in Javascript onSeptember 21, 2017

最近搭建了公司的后台管理系统, 而且系统还比较庞大, 要实现以下几点:

  • 菜单权限, 根据不同权限显示不同的菜单
  • 操作权限, 比如有些账号没有新增权限, 有些没有修改或者删除权限
  • 数据权限, 比如统计概况, 普通管理员不能看到公司营业概况,但能看到自己所属区域的概况
  • 显示权限, 比如列表, 运营能看到那一列的签约金额,但市场不能看到签约金额这一列

到目前为止还在构建中, 已经解决菜单权限和操作权限。

菜单权限:

最开始的时候也是按照楼上给出的方法,本地先配置一套路由,然后登陆成功后会从服务器返回一个菜单列表,然后在beforeEach里面把返回的菜单列表和本地配置的路由进行对比, 如果存在则有权限访问。 做了几天发现很难用, 本地得配置一整套路由,还得做几个页面来把这些路由信息写入到服务器,这样来进行权限分配, 当你的权限菜单比较多的时候, 像我们这个后台,光公司内部权限就有好几套, 还有代理商、商家权限等等, 不同的菜单可能会超过几百个, 这样配置太累了,还容易出错。

最后的解决思路是完全不在本地做任何路由配置, 登录页面单独弄,不放到vue组件里面, 登录成功后从后台抓取菜单列表, 因为现在是已经登录成功了,所以抓取的就是拥有全新的菜单。 抓取成功后在配置到路由里面,然后实例化vue , 这样就避免了本地配置一套路由了,完全是服务器上面配置路由。

这样解决的难点只有一个,那就是路由需要对应的组件,所以我们将所有组件存放到一个对象里面, 服务器的返回的菜单列表里面,会有一个字段配置组件名, 在抓取成功后生成路由配置的时候就使用 router[menuName]就能直接加载到这个组件,非常方便。

main.js代码片段:

// 实例化Login类并初始化
 new Login(function (err, data) {
  if (err) {
   // 登录出错
  } else {
   // 登录成功
   init(data);
  }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的组件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 实例化路由
 router = new Router({routes: routers});
 // 再实例化vue
 new Vue({
  el: '#app',
  store,
  router,
  nprogress,
  ...App
 });
};

componentConfigs.js 代码片段:

export default {
 Common: {
  Admin: require('../../vue/pages/common/Admin'),
  Index: require('../../vue/pages/common/Index'),
  UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users')
 }
}

服务器返回的菜单json:

其中meta 字段里面是当前路由里的操作权限

[{
      "path": "\/admin\/index",
      "name": "\u9996\u9875",
      "component": "Common.Index",
      "display": true,
      "icon": "icon-home"
    }, {
      "path": "\/admin\/updatePassword",
      "name": "\u4fee\u6539\u5bc6\u7801",
      "component": "Common.UpdatePassword",
      "display": false
    }, {
      "path": "\/admin\/commodity",
      "name": "\u5546\u54c1\u7ba1\u7406",
      "component": "Content",
      "display": true,
      "icon": "icon-class",
      "children": [{
        "path": "\/admin\/commodity\/publicWarehouse",
        "name": "\u516c\u5171\u5e93\u7ba1\u7406",
        "component": "Commodity.PublicWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }, {
        "path": "\/admin\/commodity\/businessesWarehouse",
        "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
        "component": "Commodity.BusinessesWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }]
    }]

菜单的权限大概就是这样, 至于操作权限, 思路是这样的: 写一个鉴权的vue插件, 然后所有的操作独立放到methods里面; 然后所有的操作 @click里面调用鉴权函数, $auth('add', arg1, arg2, ...argN) ; $auth里面判断this.$route.meta 里是否有权限进行这个操作, 如果有则调用 this[authName].apply(null, arg);

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

Javascript 相关文章推荐
JS的replace方法详细介绍
Nov 09 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
JavaScript手风琴页面制作
May 17 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
vue前端工程的搭建
Mar 31 Vue.js
react router 4.0以上的路由应用详解
Sep 21 #Javascript
详解10分钟学会vue滚动行为
Sep 21 #Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
JavaScript实现简单生成随机颜色的方法
Sep 21 #Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 #Javascript
shiro授权的实现原理
Sep 21 #Javascript
AngularJS 的$timeout服务示例代码
Sep 21 #Javascript
You might like
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php使用codebase生成随机数
2014/03/25 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
深入浅析Python传值与传址
2018/07/10 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python 为什么说eval要慎用
2019/03/26 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
化工专业应届生求职信
2013/11/08 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
工作决心书
2014/03/11 职场文书
义卖募捐活动总结
2015/05/09 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL