内容简介:后台管理系统一般都会有权限模块,用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。左边为菜单,分为两级,右边为图表显示区域,有增删改查的按钮。
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- skadmin权限管理系统
- 在 Windows 系统上降低 UAC 权限运行程序(从管理员权限降权到普通用户权限)
- 在 Windows 系统上降低 UAC 权限运行程序(从管理员权限降权到普通用户权限)
- Java开发企业级权限管理系统
- vue后台管理系统权限控制思考与实践
- 管理系统类项目的登陆与权限功能的实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
编译原理
Alfred V. Aho、Monica S.Lam、Ravi Sethi、Jeffrey D. Ullman / 赵建华、郑滔、戴新宇 / 机械工业出版社 / 2008年12月 / 89.00元
本书全面、深入地探讨了编译器设计方面的重要主题,包括词法分析、语法分析、语法制导定义和语法制导翻译、运行时刻环境、目标代码生成、代码优化技术、并行性检测以及过程间分析技术,并在相关章节中给出大量的实例。与上一版相比,本书进行了全面的修订,涵盖了编译器开发方面的最新进展。每章中都提供了大量的系统及参考文献。 本书是编译原理课程方面的经典教材,内容丰富,适合作为高等院校计算机及相关专业本科生及研......一起来看看 《编译原理》 这本书的介绍吧!
Markdown 在线编辑器
Markdown 在线编辑器
正则表达式在线测试
正则表达式在线测试