AntDesignPro的权限控制和动态路由

最近看了AntDesignPro关于权限控制的官方文档以及自己框架里权限控制的实现，总结一下。

 

先贴一下官网上关于权限控制的图有利于理解

 

步骤如下:

1. 判断是否有 AccessToken 如果没有则跳转到登录页面
2. 获取用户信息和拥有权限store.dispatch('GetInfo')
3. 用户信息获取成功后, 调用 store.dispatch('GenerateRoutes', userInfo) 根据获取到的用户信息构建出一个已经过滤好权限的路由结构(src/store/modules/permission.js)
4. 将构建的路由结构信息利用 Vue-Router 提供的动态增加路由方法 router.addRoutes 加入到路由表中
5. 加入路由表后将页面跳转到用户原始要访问的页面,如果没有 redirect 则进入默认页面 (/dashboard/workplace)

 

大概思路是在用户登陆时拿到该用户的角色，根据角色可以知道该角色对应有哪些菜单，然后通过一个逻辑方法 将这些从数据库拿来的菜单数据进行处理(递归处理子菜单，加入映射的组件等)，筛选并组合成router所需要的数据格式的数组，最终在路由守卫中将这个数组router.addRoutes（）添加到路由中

其实不管是动态路由还是mock数据，最终都是处理成一样的符合路由结构的一个数组后进行router.addRoutes（）。

 

我的框架中菜单的权限实际上已经在接口中被过滤掉了，拿到的数据都是该角色有权限的菜单，下图中的permission参数在antdvpro中指的是指令权限，也就是action级别的权限

action级别的权限控制，在组件上加上v-action:[method]，即可实现自行判断权限