基於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);

四、處理不同角色的不同權限路由

到這個時候，已經可以實現給角色配置不同的路由了，一般這個時候就可以創建一個超級管理員並給它配置所有路由的權限了。

本篇文章到此爲止，下篇文章將講述，根據用戶角色生成符合該角色的路由表。