前端权限管理方案之精确到按钮级别

·  阅读 8221

我正在参加「掘金·启航计划」

这是产品提出的要求:

页面上的每一个按钮,都要可以通过角色权限来控制

  当时的项目背景是一个零售系统的后台管理,所以会涉及到运营、厂家、管理员等等很多角色的使用,而其中许多数据是敏感的,例如销量,单价,利润等。前期的权限仅限于菜单级别的控制,也就是可以通过配置实现可以控制某个角色只显示某些菜单,这也是比较常规的权限处理方案——没权限就不让你看那个页面呗~

旧的按钮权限控制:

//按钮根据角色写死是否有权限,灵活性很差,修改权限需要前端改代码,而且哪个按钮有权限纯靠阅读代码识别
<button disabled={role !== "admin"}>删除</button> //大致代码,角色为admin按钮才可用
复制代码

  但目前的情况是菜单的控制在现有系统的背景下已经略显粗放了,比如有的人是可以看销售页面的,只是不允许他导出,又或者允许他新增一个商品,但是不允许他删除,所以呢要求虽然有点高,但是这个需求无疑是合理的。做过类似系统的朋友都应该了解,后管系统的列表类型页面,往往是增删改查集一体的,甚至还有导出、绑定、上传之类的操作。另一个前提是,实现按钮权限控制的同时之前菜单权限的控制也要保留支持。

解决方案构思:

方案一,既然某些操作是不允许的,是否可以将操作归类统一赋予角色权限呢,比如运营A角色无删除类权限,运营B角色有新增类权限,类似来归类实现管理。可落到实处,会发现操作很难归类,删除和修改其实是类似的,绑定解绑等操作更是无法准确分类;更大的问题是,有的角色是可以的删除A页面数据,但是不允许删除B页面数据的,而且这种方式灵活度也很低,比菜单好不到哪去,所以否掉。

方案二,摒弃按钮分类思想,给每个按钮赋予唯一code用于控制权限,管理角色权限直接勾选该角色是否激活某个code权限即可;拟定一个鉴权函数,入参数为code,该函数放置于每个按钮中,鉴权函数根据code是否在后端返回的该角色拥有code列表中,来判断返回是否具有权限,具有很高的灵活性,并且菜单也可以通过加code来实现同样效果,改动微小几乎只用增加一个鉴权函数即可实现核心逻辑。

最终采用方案二,在实际研发中,还做了优化:

1.将权限控制按层级分为模块,菜单,按钮3大层级,因为当整个模块都没有权限的时候,不必再判断按钮权限,提高性能,菜单亦如此。

2.code实际是用英文字符来表示,增强可读性,例如设备菜单是deviceMenu,而不是无意义的id。

3.实际鉴权函数入参为模块,菜单,按钮3个参数,更好理解也更加符合直觉,模块下有多个菜单,菜单下有多个按钮,也就是说几乎每个添加按钮都可以取名“add”,不必担心重复。

4.将列表字段当按钮处理,甚至可以实现同一列表每个字段的权限控制,例如部分敏感价格字段显示为**(当然安全性不高)

5.后端只需返回当前用户角色拥有的全部模块,菜单,按钮code即可

具体实现核心代码如下

// 给菜单路由增加code标识,后续根据角色拥有菜单情况遍历剔除无权限菜单即可
    	{
    		path: 'model',
    		name: 'DeviceModelList',
    		code: 'device_model',//  菜单仅在原路由增加code,改动很小
    		meta: {
    			title: '设备型号',
    			icon: 'md-menu'
    		},
    		component: () => import('@/views/DeviceModelList')
    	}
复制代码
// 给按钮增加函数鉴权,此处是采用禁用点击,也可以使用if直接不显示
    <Button:disabled="!checkButtonPower('device','device_list','add')">添加设备</Button>
复制代码
// 鉴权函数,判断模块和菜单就不用传第二,三个参数即可(当时的代码实在是不够优雅啊)
    checkButtonPower(modelCode, menuCode, buttonCode) {
    let powerStatus = false
    //取出权限列表
    const isGetPower = localStorage.getItem('userPower')
    const powerList = isGetPower ? base64.decryptAsObj(isGetPower) : null
    for (const modes of powerList) {
    	if (!!modes.menuCode && modes.menuCode == modelCode) {
    		for (const menus of modes.childMenu) {
    			if (!!menus.menuCode && menus.menuCode == menuCode) {
    				for (const buttons of menus.buttons) {
    					if (!!buttons.code && buttons.code == buttonCode) {
    						powerStatus = true
    					}
    				}
    			}
    		}
    	}
   	}
   	return powerStatus
   },
复制代码

至此,功能实现,如有疑问欢迎留言 PS:后续实现后发现Vben-admin也是用的类似的思路实现了细粒度的权限管理,思路没错~~

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改