基于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

 

 

 

注意：由于是在个人项目中实现这个功能，项目最开始默认所有用户拥有所有路由权限，当把角色和菜单关联后就可以选择一个账号为超级管理员，利用这个账号进行修改其他账号的角色，就可以实现不同用户不同角色。

二、菜单管理

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, item.menuId);
        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.$refs.routerTree.getCheckedKeys();
// 提交的数据
let params = {
    roleId: 你操作的角色ID,
    menuList: checkList
}

2、权限配置完成后，再次点击权限配置可以查看已经配置好的菜单权限

后端根据角色ID返回配置给角色的菜单ID数组就行了

let checkIds = '后端返回该角色的菜单ID数组';
this.$refs.routerTree.setCheckedKeys(checkIds);

四、处理不同角色的不同权限路由

到这个时候，已经可以实现给角色配置不同的路由了，一般这个时候就可以创建一个超级管理员并给它配置所有路由的权限了。

本篇文章到此为止，下篇文章将讲述，根据用户角色生成符合该角色的路由表。