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,
        ponent: routerList[j].ponent,
        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: "/" });
},

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

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);
}

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>