在此项目中,我们在登录时,输出登录接口中的用户数据
首先:当我们用管理员页面进行登录时,获取到的数据是这样的
再员工管理中新建一个全新的员工数据,然后使用全新的员工账号登录(默认密码123456),查看个人信息接口返回数据
使用管理员账号登录,然后给刚才创建的新员工分配俩个菜单权限和一个操作按钮权限,然后我们再次登录员工账号查看个人信息返回数据
分析数据,我们发现,roles下面的menus存的是,当前登录人可以访问的权限数据
关键点:
- 权限控制发生在pemission.js文件中
- 拿到当前用户可访问的所有菜单标识(左侧数据)
- 拿到本地所有的动态路由列表
- 俩份数据配合做过滤处理得到当前用户所有可以访问的动态路由表
- 将路由表添加到路由系统中,让路由可被访问
- 将路由表添加到菜单里显示到左侧
实现:
-
首先我们要拿到,该登录人的roles下面menus的数据(此处,我把登录接口获得的数据(data)写在了store/user.js/actions中,方法名为getUserAction ) 在这个函数中,我们需要返回roles下的数据
return data.roles
-
观察路由守卫中的代码,用await来接收getUserActio返回的数值
// result 接收getUserActio返回的数值
const result = await store.dispatch('user/getUserAction')
- 把动态路由数组传进来,用过滤器进行过滤,选出可以访问的页面数据
// 动态路由数组导入
import router, { asyncRoutes } from './router'
// asyncRoutes(动态路由数组) canLook放的就是动态路由
const canLook = asyncRoutes.filter((item) => {
return result.menus.includes(item.children[0].name)
})
- 使用addRoutes添加动态路由(路由实例.addRoutes(过滤出的动态路由数组))
router.addRoutes([...canLook, { path: '*', redirect: '/404', hidden: true }])
这样整个动态路由按需获取的过程就完成了