vue权限管理系统

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里存在就显示。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>