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

本文共计1496个文字，预计阅读时间需要6分钟。

目录+这是产品提出的诉求：+旧的按钮权限控制：+解决方案构思：+方案优化+整体实现核心代码+这是产品提出的诉求：+页面上的每一个按钮，都应可通过角色权限来控制+当前的项目背景

目录

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

这是产品提出的要求：

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

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

旧的按钮权限控制:

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

但目前的情况是菜单的控制在现有系统的背景下已经略显粗放了，比如有的人是可以看销售页面的，只是不允许他导出，又或者允许他新增一个商品，但是不允许他删除，所以呢要求虽然有点高，但是这个需求无疑是合理的。