需求背景
鉴于公司内网系统繁多，员工需要针对不同系统进行不同职责划分，由此产生内网系统权限统一设计需求。
设计思路
建立角色概念，为各个系统创建对应角色，配置不同权限。通过在不同系统内为同一账号配置不同角色，实现系统内权限控制。其中，各个功能点权限由业务方确认，研发进行创建，存入权限池（同一系统内权限功能点汇总的地方）。通过建立权限树（由权限池内各个权限功能点配置产生的数据结构），实现权限整体分层级剥离。通过角色创建，分配权限树中角色所需功能点，完成角色权限配置。最终，为帐号分配对应角色，完成权限控制。由于各个系统权限控制方式统一，以下设计方案均针对单个系统，区分多个系统权限仅需服务端增加字段表明系统来源即可。整体权限控制，服务端负责校验当前用户是否拥有当前请求的接口权限，前端负责控制菜单入口及功能点是否展示。
权限池
权限池用于存放当前系统内所有权限项。其中每一项都会成为权限树的组成部分。
权限池列表
如图所示，权限池所需元素有：权限ID，权限名称，及对应功能的接口地址。
基础功能：列表查询，添加权限项，修改权限项，删除权限项
对应字段解释：
权限ID：权限唯一标识。通过用户登录拿到用户当前所有权限ID列表，路由切换或页面刷新时校验当前页面中，每个权限ID是否存在于当前用户所拥有的权限ID列表中，以此判定用户是否拥有该功能权限。
权限名称：配置权限树时的展示项及权限描述
接口地址：该权限对应的后端接口地址，用于后端接口权限校验
权限树
权限树为单个系统所有权限集合，由业务方确认权限项后，研发从权限池中挑选对应权限项配置层级。之所以有层级概念，一方面考虑到了菜单渲染，另一方面方便配置人员配置对应页面下的权限项。
权限树
如图所示，权限树基础功能：添加权限项，修改权限项，删除权限项
通过修改权限树数据结构，可以为菜单渲染，权限配置渲染添加差异参数
树形结构使用的是element UI的组件，具体参照树形组件
数据结构如下：
[
{
"isShowOnMenu":true, //自定义参数，用来判断此权限项是否为菜单项
"privilegeId":1006,
"name":"账号管理",
"menuUrl":"/account", //自定义参数，用来渲染菜单路由
"children":[
{
"isShowOnMenu":true,
"privilegeId":1017,
"name":"账号列表",
"menuUrl":"/account/list",
"children":[
{
"isShowOnMenu":false,
"privilegeId":1018,
"name":"添加账号"
}
]
}
]
}
]
权限树将会用来作为菜单渲染，角色分配的数据模版，因此，此处的创建顺序尤为重要。
角色配置权限
创建不同角色，通过共用同一份权限树，分配不同权限，为不同职能进行划分。其中，页面级权限分配在左侧，方便配置人员进行页面控制；功能级权限放在右侧，提供全选功能，方便配置人员进行权限功能细分。
角色配置权限
账号分配权限
为账号分配预先配置好权限的对应角色，完成账号在系统内的权限控制。
账号分配权限
写在最后
本文旨在提供权限设计整体逻辑，更多细节及代码实战敬请期待下一篇文章，权限开发实战。
网友评论