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

目录

• 这是产品提出的要求：
• 旧的按钮权限控制:
• 解决方案构思：
• 方案优化
• 具体实现核心代码

这是产品提出的要求：

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

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

旧的按钮权限控制:

//按钮根据角色写死是否有权限，灵活性很差，修改权限需要前端改代码，而且哪个按钮有权限纯靠阅读代码识别
<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也是用的类似的思路实现了细粒度的权限管理，思路没错~~

更多关于按钮级别前端权限管理的资料请关注易盾网络其它相关文章！