Vue权限管理

在此项目中，我们在登录时，输出登录接口中的用户数据
首先：当我们用管理员页面进行登录时，获取到的数据是这样的

再员工管理中新建一个全新的员工数据，然后使用全新的员工账号登录（默认密码123456），查看个人信息接口返回数据

使用管理员账号登录，然后给刚才创建的新员工分配俩个菜单权限和一个操作按钮权限，然后我们再次登录员工账号查看个人信息返回数据

分析数据，我们发现，roles下面的menus存的是，当前登录人可以访问的权限数据

关键点：

1. 权限控制发生在pemission.js文件中
2. 拿到当前用户可访问的所有菜单标识（左侧数据）
3. 拿到本地所有的动态路由列表
4. 俩份数据配合做过滤处理得到当前用户所有可以访问的动态路由表
5. 将路由表添加到路由系统中，让路由可被访问
6. 将路由表添加到菜单里显示到左侧

实现：

1. 首先我们要拿到，该登录人的roles下面menus的数据（此处，我把登录接口获得的数据（data）写在了store/user.js/actions中，方法名为getUserAction ） 在这个函数中，我们需要返回roles下的数据 return data.roles

2. 观察路由守卫中的代码，用await来接收getUserActio返回的数值

// result 接收getUserActio返回的数值
 const result = await store.dispatch('user/getUserAction')

4. 把动态路由数组传进来，用过滤器进行过滤，选出可以访问的页面数据

// 动态路由数组导入
import router, { asyncRoutes } from './router'
// asyncRoutes（动态路由数组） canLook放的就是动态路由
 const canLook = asyncRoutes.filter((item) => {
          return result.menus.includes(item.children[0].name)
        })

5. 使用addRoutes添加动态路由（路由实例.addRoutes(过滤出的动态路由数组)）

 router.addRoutes([...canLook, { path: '*', redirect: '/404', hidden: true }])

这样整个动态路由按需获取的过程就完成了