管理台权限模块 - 完整路由权限及按钮权限

这篇文章主要讲的是动态路由添加，下篇我们再仔细说明一下按钮权限的做法，

本文基础框架在element-ui 及element-admin-template基础上进行的二次开发

动态路由权限：

首先这里我们应该想清楚我们要怎么去做这个动态路由，按照我对动态路由的理解，一般都是服务端储存路由数据，返回到客户端进行路由列表渲染，element-admin官方的根据角色权限渲染可能是另外一种方式，不过在我自己处理的前端框架中一般情况都是第一种方案，这里只是给大家提供一个思路，特殊情况的需要自己处理。

1 全局路由守卫添加如下代码

// 获取动态路由然后使用VUEX进行组织
const accessRoutes = await store.dispatch('permission/generateRoutes', menuList);// 高版本vue-router使用addRoute 方法，低版本则使用 addRoutes
accessRoutes.forEach(item => {router.addRoute(item)
})

这里我们先看下这个menuList的返回格式下图中这个是单条数据格式，我解释下关键的几个字段，首先是id（主键），然后是pid（父级ID），fullAuth（权限授权），path（命名路由），因为返回的并不是一棵树，所有我们接下来要进行实际的数据组织

{"description": "Dubbo管理","createTime": "2021-10-13 18:46:15","createBy": "c107e1f74d484b218bdf11341f5c048d","deleteTime": null,"deleteBy": null,"updateBy": null,"updateTime": null,"isDel": "0","id": "1a1f1e0f528d49399c0ead0fb92e6b1d","pid": "b2e13293b744402081e023337a58b23e","name": "Dubbo管理","fkDicMenuType": "01", // 菜单类型 01 - 菜单， 02 - 按钮"fkDicMenuShow": "01", // 是否显示 01 - 是， 02 - 否"auth": "dubbo","fullAuth": "system:dubbo","path": "dubbo","icon": null,"sort": 7,"fkModularId": "cafc9923d4404babada7ebcb90a2f377","parent": null,"flag": true
}

2 组织原始数据

下面的代码不难看懂，递归一个树，为什么设置pid初始值为1呢，因为跟pid为1，这个要看后端的具体返回

function dataToTree(data, pid = '1') => {if (!data) return [];let res = [];let loopList = data.filter(ele => {return ele.pid == pid;})if (loopList && loopList.length) {let children = [];loopList.forEach(im => {children = utils.dataToTree(data, im.id);if (children && children.length) {im.children = children;} else {im.children = undefined;}})res.push(...loopList);return res;} else {return []}
}

3 修改原始数据

这里我直接上代码，然后看注释

return new Promise(res => {
let accessedRoutes, originMenuList;
if (true || rootState.app.isPro) {// 过滤之前保存一份原始menu 用途是按钮权限获取originMenuList = lodash.cloneDeep(menuList);// 利用刚才的工具方法递归数据originMenuList = utils.dataToTree(originMenuList);// 组织树结构accessedRoutes = getMenuItems(asyncRoutes, menuList);// 过滤不显示的路由accessedRoutes = filterMenu(accessedRoutes);// 排序accessedRoutes = lodash.sortBy(accessedRoutes, it => {return it.sort;});console.log(accessedRoutes);} else {accessedRoutes = asyncRoutes;
}// 保存原始数据
commit('SET_ORIGINMENULIST', originMenuList)// 添加目前的路由数据
commit('SET_ROUTES', accessedRoutes)// 返回数据
res (accessedRoutes)
})

我们逐个分析这几个核心方法

getMenuItems

function getMenuItems(list, accessMenu) {

if (!accessMenu || !accessMenu.length) return [];

return list.map(item => {

// 查找是否有当前路由

let menu = accessMenu.find(it => {

return it.path == item.name;

});

if (menu) {

let {

path,

alwaysShow,

meta,

redirect,

component,

icon,

} = item,

{

name,

fkDicMenuType,

fkDicMenuShow,

auth,

fullAuth,

sort

} = menu,

children = undefined;

let target = menu.path;

// 如果数据有children 就进入递归方法传入item.children

if (item.children && item.children.length > 0) {

children = getMenuItems(item.children, accessMenu);

};

return {

alwaysShow, // 遵循路由规则不熟悉的童鞋可以去看下element-admin

children, // 子集

redirect,

component, // 当前路由的component

path, // path路径

meta: {

title: name, // 路由名称

icon:meta.icon, // 路由图标 -- 根据自己的需求去改，后来我舍弃了，没必要

affix: meta.affix // 遵循路由规则不熟悉的童鞋可以去看下element-admin

},

fkDicMenuShow, // 路由是否显示

fkDicMenuType, // 路由类型

auth,

fullAuth, // 路由权限，用来处理按钮权限的标识

sort,

name: target

};

} else {

// 这里就是为了我下一步过滤做准备

return {

fkDicMenuShow: '02'

}

}

});

};

到此呢我们就完成了基本的数据组装，可能有些童鞋会理解不了，精心思考就明白了，无非就是多了一个递归写法，如果有children就是找，接下来要做的事情就是过滤那些不展示的路由

filterMenu

function filterMenu(list){

return list.filter((item) => {

let children = undefined;

if(item.children && item.children.length > 0){

children = filterMenu(item.children);

item.children = children;

if (!children || children.length == 0) {

return false;

} else {

return item.fkDicMenuShow == '01';

}

}else{

return item.fkDicMenuShow == '01';

}

});

};

这段代码的作用就是将后端返回中不显示的菜单过滤掉，同样也是使用了递归方法

4 添加路由

我是在全局路由守卫中添加的

accessRoutes.forEach(item => {router.addRoute(item)
})// 所有不存在的路由都是404
router.addRoute({ path: '*', redirect: '/404', hidden: true });

ok，大功告成！