vue权限管理系统的实现代码


Posted in Javascript onJanuary 17, 2019

后台管理系统一般都会有权限模块,用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。

vue权限管理系统的实现代码

左边为菜单,分为两级,右边为图表显示区域,有增删改查的按钮。

表的结构

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_auth_rule
-- ----------------------------
DROP TABLE IF EXISTS `t_auth_rule`;
CREATE TABLE `t_auth_rule` (
 `id_pk` bigint(20) NOT NULL AUTO_INCREMENT,
 `auth_id` varchar(128) NOT NULL COMMENT '权限Id',
 `pauth_id` varchar(128) DEFAULT NULL COMMENT '父级Id',
 `auth_name` varchar(255) NOT NULL COMMENT '权限名称',
 `auth_icon` varchar(255) NOT NULL COMMENT '权限图标',
 `auth_type` smallint(6) NOT NULL COMMENT '权限类型,BIT表示其属性\r\n      0x00表示可显示的菜单权限节点;\r\n      0x01表示普通节点',
 `auth_condition` text COMMENT '条件',
 `remark` varchar(255) DEFAULT NULL COMMENT '备注',
 `is_menu` smallint(255) DEFAULT '0' COMMENT '是否为菜单,0表示非,1表示是',
 `weight` int(11) NOT NULL DEFAULT '0' COMMENT '权重',
 `rule` varchar(256) DEFAULT NULL COMMENT '规则路径主要对应菜单或方法的路径名称',
 `cr_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
 `up_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
 PRIMARY KEY (`id_pk`),
 UNIQUE KEY `AK_auth_id` (`auth_id`)
) ENGINE=InnoDB AUTO_INCREMENT=264 DEFAULT CHARSET=utf8 COMMENT='权限规则表,记录权限相关的信息,权限以父子关系存在,菜单是权限的一种。';

SET FOREIGN_KEY_CHECKS = 1;


SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_role_auth
-- ----------------------------
DROP TABLE IF EXISTS `t_role_auth`;
CREATE TABLE `t_role_auth` (
 `id_pk` bigint(20) NOT NULL AUTO_INCREMENT,
 `role_id_fk` varchar(32) DEFAULT NULL COMMENT '角色id',
 `auth_id_fk` varchar(128) DEFAULT NULL COMMENT '权限id',
 `aa` varchar(255) DEFAULT NULL,
 PRIMARY KEY (`id_pk`)
) ENGINE=InnoDB AUTO_INCREMENT=77 DEFAULT CHARSET=utf8 COMMENT='角色与权限的关系表';

SET FOREIGN_KEY_CHECKS = 1;

对于菜单的权限,通过路由表匹配

addRouters(menuMap) {
  let routerArr = [];
  for (let j = 0; j < routerList.length; j++) {
    let obj;
    if (menuMap['AuthRule::' + routerList[j].path]) {   // 找到一级菜单
      obj = {
        path: routerList[j].path,
        component: routerList[j].component,
        redirect: routerList[j].redirect,
        name: routerList[j].name,
        meta: routerList[j].meta,
        children: []
      };

      if (routerList[j].children.length) {
        for (let k = 0; k < routerList[j].children.length; k++) {
          let _fullpath = routerList[j].children[k].path
          if (routerList[j].children[k].meta) {
            _fullpath = routerList[j].children[k].meta.parentPath + '/' + _fullpath 
          }
          if (menuMap['AuthRule::' + _fullpath]) { // 找到二级菜单
            obj.children.push(routerList[j].children[k]);
          }
        }
      }
    }
    if (obj) {
      routerArr.push(obj);
      this.$router.options.routes.push(obj);
    }
  }

  storage.set("routerArr", routerArr);
  this.$router.addRoutes(routerArr);
  this.$router.push({ path: "/" });
},

menuMap为登录时获取的权限菜单,是一个对象; routerList为前端定义的路由表;遍历routerList,如果routerList的key在menuMap里能找到的话,就表示该路由存在。最后生成一个过滤后的路由表,用vue提供的addRoutes方法动态添加到路由中,并把过滤后的路由表存到本地。

const menuMap = {
  '/dashboard': {path: '/dashboard', name: '首页'}
}
const routerList = [
  {path: '/dashboard', name: '首页', component: ..}
]

在页面刷新的时候,从本地获取路由表,添加到路由表中,代码如下,constRouterArr为基础路由表,比如登录,404等

const routerList = storage.get('routerArr')
const routerArr = constRouterArr.concat(routerList);

对于按钮的权限

if (res.data.auth_rule_map) {
  let obj = {}
  Object.keys(res.data.auth_rule_map).forEach(i => {
   // 将所有的按钮放到一个obj里 key 为接口地址 
   if (res.data.auth_rule_map[i].is_menu === 0) { // 如果是按钮
    obj[res.data.auth_rule_map[i].rule] = 1
   }       
  })
  storage.set("btnList", obj);
  storage.set("menuTree", res.data.auth_rule_map);
}

auth_rule_map为接口返回权限map,把按钮的权限过滤出来存到本地。

将map添加到每个路由组件的data里,(这里有一个问题,怎么判断一个组件是否是路由组件),目前想到的是通过组件name来判断,把所有的路由组件放到一个数组里做判断。

在组件内部的按钮上加上v-if,如果this.uri__里的uri在uriMap里存在就显示。

也可以通过方法来判断,如下面的__isBtnShow,不仅可以控制按钮的显示隐藏,还可以控制其样式,比如颜色等,更加灵活,推荐使用方法来控制

uri = {
  ADD_MEMBER: '/api/add_member'
}

export default function install (Vue) {
 const uriMap = storage.get('btnList')
 //uriMap['/admin/api/auth_rule/update_auth_rule.action'] = 1
 Vue.mixin({
  created() {
   const arr = ['MemberManage', 'PayManage', '...']
   if (arr.indexOf(this.$options.name) !== -1) {
    this.dataUri__ = uriMap
    this.uri__ = uri 
   }
  },
  data() {
   return {
    dataUri__: {}
   }
  },
 })
}

<Button v-if="dataUri__[uri__.ADD_MEMBER]">添加会员</Button>

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

Javascript 相关文章推荐
JQuery文字列表向上滚动的代码
Nov 13 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
javascript实现在线客服效果
Jul 15 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
详解VUE 数组更新
Dec 16 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
使用nvm和nrm优化node.js工作流的方法
Jan 17 #Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 #Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 #Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 #Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 #Javascript
如何能分清npm cnpm npx nvm
Jan 17 #Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 #Javascript
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
帝国cms目录结构分享
2015/07/06 PHP
Yii2如何批量添加数据
2016/05/17 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python实现复制整个目录的方法
2015/05/12 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
分析python请求数据
2018/08/19 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python实现猜数游戏
2020/03/27 Python
如何使用Pytorch搭建模型
2020/10/26 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
优秀学生干部推荐材料
2014/02/03 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
保护动物倡议书
2014/04/15 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
外出考察学习心得体会
2016/01/18 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python