浅谈vue权限管理实现及流程

2020-06-16 06:37:25易采站长站整理

// 根据权限筛选出我们设置好的路由并加入到 path='/' 的children,就是home路由的children下
let routes = handleModule.getRouter(userPopedoms, permissionRouter);
let homeContainer = dynamicRoutes.find(v => v.path === '/');

// 使用concat的目的是让 分配给用户的权限处于 children 的第0项
homeContainer.children = routes.concat(homeContainer.children);
// 设置首页重定向,重定向到用户权限的第0项
homeContainer.redirect = homeContainer.children[0].name;

// 根据权限生成左侧导航菜单
let sidebarMenu = handleModule.getSidebarMenu(userPopeList);
commit('setMenu', sidebarMenu);

// 初始路由
let initialRoutes = router.options.routes;
// 动态添加路由。只有刷新页面才会清空动态添加的路由信息
router.addRoutes(dynamicRoutes);
// 完整的路由表
commit('setPermission', [...initialRoutes, ...dynamicRoutes]);
}
},
};

(1)首先,let data = await getUserByToken(); 发请求获取用户权限,得到 data,data.userPopedoms 格式大致如下:


[
{
"moduleGroupId": 1001,
"moduleGroupName": "部署管理",
"requestMapping": "deploy-manage",
},
{
"moduleGroupId": 1100,
"moduleGroupName": "系统管理",
"requestMapping": "sys-manage",
"moduleList": [
{
"moduleId": 1101,
"moduleName": "系统日志",
"requestMapping": "system-log",
"moduleGroupId": 1100,
},
{
"moduleId": 1102,
"moduleName": "系统告警",
"requestMapping": "sys-alert",
"moduleGroupId": 1100,
},
],
}
]

(2)然后,根据我们写好的路由数组,进行对比,过滤得到我们要的路由。路由格式在上文“路由定义”的 router/router.js 已经提到。还要根据用户权限处理得到侧边栏菜单。

为此,我们需要两个处理函数,一个根据用户权限列表和路由数组过滤得到最终路由,另一个根据用户权限处理得到侧边栏菜单。所以另外专门创建了一个文件 handle-module.js 存放这两个函数。


/* handle-module.js */
const handleModule = {
/**
* 根据后台返回的权限,以及配置好的所有路由,过滤出真实路由
* @param {Array} permissionList 后台返回的用户权限列表
* @param {Array} allRouter 前端配置好的所有动态路由的集合
* @return {Array} 过滤后的路由
*/
getRouter(permissionList = [], allRouter = []) {
// permissions 的格式为 ["deploy-manage", "system-log"] let permissions = permissionList.reduce((acc, cur) => {
if (cur.moduleList && cur.moduleList.length > 0) cur = cur.moduleList;