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 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
angular2使用简单介绍
Mar 01 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php中smarty区域循环的方法
2015/06/11 PHP
学习PHP session的传递方式
2016/06/15 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
详谈javascript异步编程
2016/02/21 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
六一亲子活动总结
2014/07/01 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android