基于vue-element-admin的异步权限路由——菜单管理（⼆）⼀、前置准备⼯作
上篇⽂章讲述了⽤户和⾓⾊进⾏关联，这篇⽂章将讲述菜单管理(路由管理)以及菜单和⾓⾊进⾏关联。⾸先需要准备的⼯作：
1、菜单数据表（menu_table）
menuId pid name url sort type
菜单ID菜单⽗级ID菜单名称菜单路径菜单排序菜单
解释：菜单ID、name、type为⾮空字段，⼀级菜单的⽗级pid为空字符串，sort排序只影响后台管理系统菜单管理表的排序，type字段针对菜单为1，针对页⾯按钮级别为2。
2、菜单⾓⾊关系表（relation_table）
id menuId roleId
主键菜单ID⾓⾊ID
注意：由于是在个⼈项⽬中实现这个功能，项⽬最开始默认所有⽤户拥有所有路由权限，当把⾓⾊和菜
vue element admin单关联后就可以选择⼀个账号为超级管理员，利⽤这个账号进⾏修改其他账号的⾓⾊，就可以实现不同⽤户不同⾓⾊。
⼆、菜单管理
1、添加菜单如下图：
2、菜单管理如下图：
后端返回的数据如下：
{
code: 200,
data: [
{
menuId: "d7c613c7dcbb57594058c8b91f845b10"
name: "权限管理"
pid: ""
sort: 0
type: 1
url: "/privilegeManage"
},
{
menuId: "725a285d2a722f2ccd58e57e6cd7a129"
name: "菜单管理"
pid: "d7c613c7dcbb57594058c8b91f845b10"
sort: 0
type: 1
url: "menuList"
},
... ...
]
}
然⽽这样的数据我们是⽆法直接⽤el-table的树形表格功能的，需要⼀个⽅法进⾏处理：
/**
* 过滤数据成树形数据
* @param list
* @param pid
* @returns {[]}
*/
filterData(list, pid = '') {
let itemList = list.filter(item => item.pid === pid);
let dataList = [];
itemList.forEach(item => {
item.children = this.filterData(list, uId);
if (item.children.length === 0) {
delete item.children;
}
dataList.push(item);
})
return dataList;
}
注意：el-table最好加上row-key="menuId" ，:tree-props="{children: 'children'}"这两个属性。
三、权限配置（⾓⾊管理菜单）
⽬前实现⽅式是采⽤两套路由，即前端在路由配置⽂件router.js中配置所有路由，后端数据库也保存相同的所有路由。
1、配置路由实现⽅式如下图：
在⾓⾊管理列表点击权限配置，弹窗利⽤el-tree显⽰所有菜单，数据依然是列表再使⽤上⾯相同的⽅法把数据处理成树形数据。el-tree组件使⽤：
<template>
... ...
<el-tree
:data="routerTreeData"
show-checkbox
default-expand-all
node-key="id"
ref="routerTree"
highlight-current
:props="routerProps"
:check-strictly="true">
</el-tree>
... ...
</template>
<script>
export default {
data() {
return {
routerTreeData: [],
routerProps: {
children: "children",
label: "label",
}
}
},
... ...
}
</script>
check-strictly这个值设置为true，是为了更好的操作，提交的时候只提交勾选的菜单数据就⾏。
提交数据⾮常简单，提交选择的⾓⾊ID以及选择的菜单的ID就⾏，选择的菜单的ID以数组的形式。
// 获取选择的菜单ID数组
let checkList = this.$CheckedKeys();
// 提交的数据
let params = {
roleId: 你操作的⾓⾊ID,
menuList: checkList
}
2、权限配置完成后，再次点击权限配置可以查看已经配置好的菜单权限
后端根据⾓⾊ID返回配置给⾓⾊的菜单ID数组就⾏了
let checkIds = '后端返回该⾓⾊的菜单ID数组';
this.$uterTree.setCheckedKeys(checkIds);
四、处理不同⾓⾊的不同权限路由
到这个时候，已经可以实现给⾓⾊配置不同的路由了，⼀般这个时候就可以创建⼀个超级管理员并给它配置所有路由的权限了。
本篇⽂章到此为⽌，下篇⽂章将讲述，根据⽤户⾓⾊⽣成符合该⾓⾊的路由表。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。