我正在参加「掘金·启航计划」
简介
项目开始至今，长期的迭代开发导致系统权限配置越来越繁琐，为了减轻开发人员配置权限的时间，特定自研一个能够增量生成权限脚本的工具。本文也主要为各位开发者提供一套系统权限解决方案，如有其他建议欢迎各位一同探讨。
权限设计优化过程
项目初期是直接由开发人员自行编写权限脚本，相对较大需求系统权限配置工作量就会大大增加，而且手动编写脚本多少都会有出错的可能性，还得花时间排查。
到了中期开始改用Excel文档配置，设定好规则在Excel文件中填写完整相关权限代码，将Excel导入由后端代码解析生成全量权限脚本。
近期考虑到Excel导出的权限脚本是全量的，频繁的遇到多个迭代版本交叉升级的时候，权限脚本就会出现冲突，因此考虑了两种做增量生成脚本的方案如下：
- 通过Excel做增量脚本： 此方案高度依赖后端服务，去重逻辑复杂，相对开发人员来说Excel操作较为繁琐，配置有一定的复杂度。
- 使用UI界面进行操作生成增量脚本： 根据系统权限结构生成权限树，在UI界面针对所需操作的权限点进行操作，最终生成所有操作的脚本，开发人员即可直接复制脚本进行使用。（下面具体说明）
技术要求
我是一名后端开发人员，前端水平相对较差，但勉强都能看懂以及编写一些简单的前端代码，所以还是有一定的前端基础。在这里也就使用了较为简单的vue框架结合ant-design-vue组件进行开发，由于权限脚本生成主要是开发人员自己内部使用，所以UI层面也都按个人喜好简单设计。
ant-design-vue组件：2x.antdv.com/components/… ，具体组件说明我就不在这里讲解了，里面都有具体的案例，喜欢的话自己进去研究。
权限介绍
项目采用的权限结构主要由以下几个层级进行划分：
- 菜单（Menu）：系统功能菜单
- 主页面（Page）：具体功能点页面
- 按钮（Component）：页面底下可进行操作的按钮
- 视图页（View）：页面底下可进入的视图页（如：查询用户详情）
- 接口（Feature）：后端接口访问权限
角色：根据每种账号类型默认赋予对应的角色，相关角色关联对应的权限信息，拥有权限的角色才允许进行相关的操作。
权限点关系说明如下图：
另有其他两种类型的接口权限：
- 公共接口：不与角色关联可直接访问的接口。
- 登录权限接口：不与角色关联，只要用户已登录即可直接访问的接口。
权限脚本生成
主界面如下：
左侧菜单节点主要是配置多个角色，每个角色加载的权限树结构都是独立的。
右上角有相对简单的操作指示Help?，以及较为详细的“帮助文档”便于新加入团队的成员进行了解。接下来具体说明一下使用方法：
- 菜单：如果系统有新增角色，对应根节点菜单需要手动在后端进行初始化，其余可在UI界面对菜单节点右击添加子菜单或页面，每一个新增的弹窗界面都有一个示例便于参考。
- 主页面：在菜单节点右击即可新增主页面：
- 在主页面节点右击即可新增按钮、视图页、接口权限（类似的表单不再一一贴图）：
Feature：接口即为后端接口，需配置请求方式、接口路口
View：视图即为主页面底下详情页，需配置前端页面路由地址
Component：按钮即为页面底下操作按钮，需配置前端绑定的按钮权限编码
- 单击上面“查看脚本”按钮，即可查看所有操作生成的增量脚本，开发人员可直接复制使用，由此可以看出大大的节省了开发人员编写脚本的时间，以及避免了编写脚本出错的可能性：
生成的权限脚本开发人员可根据需求独立提交部署，避免了多个需求交叉开发全量生成脚本的影响。
- 环境切换：右上角支持环境切换，主要用于多环境检查是否有权限漏配的。
权限校验
系统界面上的权限限制由用户登录后前端获取权限数据，对能否操作访问的菜单、页面、按钮进行显隐设置。后端主要通过网关全局拦截，针对客户端发起的请求进行角色权限匹配校验。校验通过的权限即可放行请求到指定业务接口，否则统一拦截抛出权限异常。
总结
本文基于已有的权限结构进行梳理，主要为开发人员减轻编写权限脚本的负担，整体上在团队内部使用还是得到良好的认可。
尽管如此，有一些特殊的情况需要手动处理，比如新增一个角色，其权限有很多可以复用其他角色，此时就需要把其他角色的脚本重新复制一遍。
