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

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

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

表的结构

SET NAMES utf8mb4设置外键检查=0;- -t_auth_rule的表结构-如果存在“t _ auth _ rule”，则删除表；CREATE TABLE ` t _ auth _ rule `(` id _ PK ` big int(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)非空注释'权限名称、` auth_icon` varchar(255)非空注释'权限图标，` auth _ type `小整数(6)非空注释'权限类型，BIT表示其属性\r\n0x00表示可显示的菜单权限节点；\r\n0x01表示普通节点，` auth_condition` text COMMENT '条件，`备注` varchar(255) DEFAULT空注释'备注，` is _ menu ` small int(255)DEFAULT ' 0 ' COmment '是否为菜单，0表示非，1表示是、"重量" int(11)不为空默认值"0"注释权重，` rule ` varchar(256)DEFAULT NULL COMMENT '规则路径主要对应菜单或方法的路径名称，` cr_time '时间戳不为空默认值当前_时间戳注释'创建时间，` up_time '时间戳不为空默认当前时间戳更新当前时间戳注释'更新时间，PRIMARY KEY (`id_pk `)，UNIQUE KEY ` AK _ auth _ id `(` auth _ id `))ENGINE=InnoDB AUTO _ INCREMENT=264 DEFAULT CHARSET=utf8 COMMENT='权限规则表，记录权限相关的信息，权限以父子关系存在，菜单是权限的一种。';设置外键检查=1;SET NAMES utf8mb4设置外键检查=0;- -t_role_auth的表结构-如果存在` t _ role _ auth `,则删除表；CREATE TABLE ` t _ role _ auth `(` id _ PK ` big int(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 _ INDEX=77 DEFAULT CHARSET=utf8 COMMENT='角色与权限的关系表；设置外键检查=1;对于菜单的权限，通过路由表匹配

addRouters(menuMap){ let routerer=[]；用于(设j=0；j routerlist . length j){ let obj；if(MenuMap[' auth rule : ' RouterList[j].路径]) { //找到一级菜单obj={ path: routerList[j].路径，组件： routerList[j].组件，redirect: routerList[j].重定向，名称为： routerList[j].名称，meta: routerList[j].meta，children :[]}；if(RouterList[j].孩子们。长度){对于(让k=0；k RouterList[j]。孩子们。长度；k ) { let _fullpath=routerList[j].儿童k .路径if (routerList[j]).儿童k .meta) { _fullpath=routerList[j].儿童[k . meta。parentpath '/' _完整路径} if(MenuMap[' auth rule : ' _完整路径]){//找到二级菜单儿童推送(routerList[j]).儿童[k])；} } } } if(obj){ RouterR。推送(obj)；这个$路由器。选项。路线。推送(obj)；} } storage.set('routerArr '，RouterArr)；这个$路由器。添加路由(路由器)；这个$路由器。push({ path : '/' })；}，menuMap为登录时获取的权限菜单，是一个对象；routerList为前端定义的路由表；遍历routerList，如果routerList的键在菜单地图里能找到的话，就表示该路由存在。最后生成一个过滤后的路由表，用某视频剪辑软件提供的添加路由方法动态添加到路由中，并把过滤后的路由表存到本地。

Const菜单映射={ '/dashboard ' : { path : '/dashboard '，名称3360 '主页' }} const路由器列表=[{path3360'/dashboard '，名称： '主页'，Component:}]页面刷新后，在本地获取路由表并添加到路由表中。代码如下。constRouterArr是基本的路由表，比如登录、404等等

const routerList=storage . get(' routererr ')const routererr=constructurearr . concat(routerList)；按钮权限

if(RES . data . auth _ rule _ map){ let obj={ } object . keys(RES . data . auth _ rule _ map)。foreach(I={//将所有按钮放在一个obj中，关键是接口地址if (res.data.auth_rule_map[i])。is_menu===0) {//如果是按钮obj [res.data.auth _ rule _ map [I]。rule]=1}}) storage.set ('BTN列表'，obj)；storage.set('menuTree '，RES . data . auth _ rule _ map)；}auth_rule_map返回界面的权限图，过滤掉按钮的权限并保存到本地。

给每个路由组件的数据添加map(这里有一个问题，如何判断一个组件是否是路由组件)。目前的思路是通过组件名称来判断，将所有的路由组件放入一个数组中进行判断。

向组件内部的按钮添加v-if，如果uriMap中存在this.uri__中的uri，就会显示该按钮。

也可以用方法来判断，比如下面的__isBtnShow，不仅可以控制按钮的显示和隐藏，还可以控制按钮的样式，比如颜色等。这样更灵活，建议使用方法来控制它们

uri={ ADD _ MEMBER : '/API/ADD _ MEMBER ' }导出默认函数install(Vue){ const Urimap=storage . get(' BtNlist ')//Urimap['/admin/API/auth _ rule/update _ auth _ rule . action ']=1 Vue . mixin({ created(){ const arr=[' MemberMage '，' PayManage '，'.'] if (arr.indexOf(this。$options.name)！==-1){这个。datauri _ _=uri映射。uri _ _=uri}}，data(){ return { datauri _ _ : } } }，})} /Button-if=' datauri _ _ [uri _ _。add _ member]'。