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

这是产品提出的要求：

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

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

旧的按钮权限控制:

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

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

解决方案构思：

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