文章目录
一、前言
项目已经进展3个月,今天才来处理左侧菜单和用户角色之间的对应关系;
比如:管理员登录可以看到用户管理菜单,普通用户登录看不见这个菜单;
虽说vue-element-admin中已经带有相关角色菜单动态显示功能,但是说简单也挺复杂的,你得要先看懂代码,然后你才能动手去改,里面代码逻辑嵌套比较深,特别是在 Vuex.Store 状态数据存放类中 各种 mutations actions 还有接口调用也混在里面很蛋疼 一看代码结构完全不想动手去改;
说复杂其实也简单,只要懂了工作原理也就解决了大半问题,个人是把 Vuex.Store 状态数据中的各种业务逻辑直接砍掉了,Vuex.Store只用来存放状态数据,业务逻辑功能单独写出去了;
二、左侧菜单动态显示原理
- 前端框架路由/router/index.js 中配置静态菜单页面:constantRoutes:[]
固定菜单所有用户都可以看到,声明结构如下:
export const constantRoutes = [
{
path: '/',
name: '监控首页',
component: Layout,
redirect: '/device',
meta: { title: '监控首页', icon: 'home' },
children: [{
path: 'device',
name: 'device',
component: () => import('@/views/device/index'),
meta: { title: '系统首页', icon: 'home' }
},
{
path: 'control',
name: 'control',
component: () => import('@/views/device/control'),
meta: { title: '控制页面', icon: 'form' },
hidden: true
}
]
}
]
- 前端框架路由/router/index.js 中配置动态菜单页面:asyncRoutes:[]
动态菜单需要在meta节点中绑定可以访问本菜单的角色,声明结构如下:
export const asyncRoutes = [
{
path: '/user',
component: Layout,
redirect: '/user',
name: '用户管理',
meta: { title: '用户管理', icon: 'el-icon-s-help', roles: ['admin'] }, // 也要加权限否则 redirect: '/user', 也会当做一个路径处理
children: [
{
path: 'index',
name: 'index',
component: () => import('@/views/user/index'),
meta: {
title: '用户管理',
icon: 'usermanage',
roles: ['admin'] // 必须添加可以访问的角色 才能保证用户在登录的时候 根据用户自身角色呈现对应的菜单
}
}
],
hidden: false
}
]
-
用户登录接口调用成功后,在显示菜单页面前,提取用户角色列表,如:[“admin”,“operator”]
-
循环检测当前用户角色可以访问的动态菜单列表;
-
把用户可以访问的动态菜单页面 和 没有限制的静态菜单页面拼接起来就是完整的菜单了;
vue-element-admin 中由于框架原因 静态菜单已经添加到了路由,所以只需要把第4步动态菜单获取到,然后添加到路由即可: router.addRoutes(AsyncRoutes)
三、总结
只要弄懂了原理,剩下的工作就好说很多了,不管是在vue-element-admin 现有结构上改,还是根据自己的习惯来改都是妥妥的;
由于这个环节改动比较大,涉及到的内容相对有点儿多,所以本文只放了解决问题的思路,具体代码就省略了;