前端资源菜单按钮权限控制完整流程分析

权限控制：
系统可以根据用户动态分配角色，角色又动态分配资源组，并且可以通过定义各个资源对应的页面权限和按钮权限
1、页面级别权限（用户是否有权限可以看到这个页面）
2、按钮级别权限（用户是否有权限看到页面中的某个按钮）

实现步骤：
一、资源管理编辑模块
需要后端返回的数据：
（1）完整的资源菜单树包含每个二级菜单下的所有按钮数组
（2）该资源已勾选的菜单数组
（3）该资源已勾选的按钮数组
使用到的组件：el-tree 用于显示资源菜单树 el-table 用于显示该菜单下的按钮列表
前端实现步骤：
1、前端根据后端返回的资源菜单树resourceTree，利用el-tree组件生成渲染树，根据后端返回的已勾选菜单数组利用setChecked方法对菜单勾选状态赋值
2、点击菜单时，前端根据遍历resourceTree查找当前点击id下的按钮数组btnList，遍历btnList对每个按钮赋值isChecked属性，当查找该按钮id是否在最新的已勾选按钮数组中，对isChecked属性进行赋值，最后前端渲染当前点击菜单ID的btnList Table
3、勾选菜单和按钮时，使用selectedBtn和selectedResource来记录当前已勾选的资源菜单和资源按钮ID
①当勾选/取消勾选按钮时，利用push/splice或者等方法更新selectedBtn
②当勾选/取消二级菜单时，遍历该二级菜单下所含有的按钮，对其菜单下的按钮同理对selectedBtn进行增减操作，并且更新记录当前的selectedResource
③当勾选/取消一级菜单时，遍历该一级菜单下所含有的二级菜单，继续再遍历二级菜单下所有按钮，对各个菜单下按钮同理对selectedBtn进行增减操作，并且更新记录当前的selectedResource
④当勾选/取消总节点时，则遍历所有一级菜单，继续遍历该一级菜单下所含有所有二级菜单，再遍历二级菜单下所有按钮，对各个菜单下按钮同理对selectedBtn进行增减操作，并且更新记录当前的selectedResource
4、提交返回数据处理
①前端需要根据getHalfCheckedNodes方法获取el-tree半选状态的资源ID
原因是selectedResource只会记录所有已勾选的资源ID，但是半选状态的资源ID不会被记录，由于菜单权限当子级有权限时，除了需要满足该子级菜单有权限还需要其父级菜单也要有权限，当只勾选部分子级菜单时，父级菜单就会是半选的状态
②最后将selectedResource拼接上getHalfCheckedNodes获取的数组ID
③提交时前端将最新的selectedBtn以及selectedResource返回给后端
二、登录
1、登录时发送请求获取当前用户当前用户已有权限的菜单数组permissionMenuList和已有权限的按钮数组permissionBtnList
三、首页菜单渲染
1、前端根据后端返回的permissionMenuList判断渲染一级和二级菜单
四、全局路由守卫
利用router.beforeEach在每次进入路由前判断用户是否已登录且当前用户进入的路由是否有权限
1、给路由定义isAuth标识，isAuth为true时，表示路由需要权限控制，则进行以下步骤
①对于一级菜单和二级菜单路由，比对该路由是否在permissionMenuList里面
②对于子路由例如edit页面和view页面等路由，在定义路由时设置activeMenu（值为其父级二级菜单，同时也用于记录当前子页面需要对应显示的高亮菜单）
对于如果有activeMenu的路由，则直接判断其activeMenu，否则直接判断该路由权限
2、当isAuth为false时，则表示不需要权限控制，则直接进入，例如login等页面
五、全局按钮权限控制
1、对于页面上需要权限控制的按钮需要加isPermission判断是否展示
2、该按钮所在的模块名称、页面名称、按钮名称组成按钮名称，例如user.users.edit，每个按钮名称都是唯一的
3、传入按钮名称比对该按钮是否在permissionBtnList里面，进而做到页面的按钮权限控制

文章旨在介绍资源菜单按钮权限控制的流程，由于代码过多，暂不附上代码，有需要可联系获取具体代码