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

本文介绍了如何在前端实现精确到按钮级别的权限管理。针对产品提出的每个按钮需通过角色权限控制的需求,讨论并否定了操作归类授权的方案,最终选择了为每个按钮分配唯一code进行权限判断的方法。在实际开发中,通过优化提升了性能和可读性,实现了模块、菜单和按钮的三级权限控制,并提供了核心代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是产品提出的要求:

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

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

旧的按钮权限控制:

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

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

解决方案构思:

方案一,既然某些操作是不允许的,是否可以将操作归类统一赋予角色权限呢,比如运营A角色无删除类权限,运营B角色有新增类权限

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端技术栈

支持鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值