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

目录

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

这是产品提出的要求：

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

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

旧的按钮权限控制:

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

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