说明
该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255，进群有什么不懂的尽管问，群主都会耐心解答。
有兴趣的朋友，请关注我吧(*^▽^*)。
关注我，学不会你来打我
效果演示**
**
一、按钮权限实现流程
以上是按钮权限实现的流程图，从上图可以清晰的看到，按钮它是存在于某一个菜单（模块）上的，所以要搞懂按钮权限的实现过程，建议先查看《菜单权限设计及实现》
二、表设计
在《菜单权限设计及实现》的基础上，新增了3张表，如下
按钮表：存放按钮名称、按钮事件、按钮样式、按钮类型等数据的表。
按钮样式表：为了统一管理和控制系统中的按钮样式，设计出了该表，该表存放按钮样式大小、图标、颜色、文字颜色、是否圆角、是否朴素等样式。在新建按钮时可以给按钮选择喜欢的样式。
按钮角色表：存放按钮属于哪个角色、那个菜单。
三、按钮与菜单的关系
在之前必须说明一点：当前按钮权限没有精确到【数据按钮权限】控制（后续会有），只有【按钮权限】控制。
什么是【按钮权限】？什么又是【数据按钮权限】，看下图↓
按钮权限：上图中【按钮】，就是我说的【按钮权限】，也是本篇文章要简述的。
数据按钮权限：上图中【数据按钮】，也就是【数据按钮权限】，本篇文章不会涉及（后续会有）。
举列：
可能有人不知道这2者的区别，在这里先简单描述下。
【数据按钮权限】是对按钮更加精确的控制。
我可以根据规则来控制系统操作人员能操作【设置用户角色】、【编辑】按钮的权限。
如：【系统操作人员1】，可以操作上图↑中【设置用户角色】、【编辑】的所有权限。
而【系统操作人员2】，只能操作【王五】这条数据的【设置用户角色】、【编辑】按钮，而【李四】、【张三】这2条数据的【设置用户角色】、【编辑】按钮不可操作。
言归正传
文章开头动图中的【按钮权限】，如何实现？
其实这个问题，在文章开头流程图中就已经体现。下面我将把流程图逐步拆分，进行详细的讲解。
按钮它必定是存在于某个菜单或某个页面中。所以在设计overallAuth2.0统一权限分发中心系统时，我建立了按钮与菜单的关系，以便维护和控制按钮权限。如下图↓
上图实现了菜单、按钮、角色三者之间的关系。当人员登录系统时，我们可以得到人员的角色。那么根据角色就能得到登录人员拥有的菜单。如下图↓
得到菜单后，我们就可以点击菜单，得到菜单id和登录获得的角色id，得到当前点击菜单的按钮。如下图↓
需要源码的，关注公众号，发送【权限】获取源码
以上就是本篇文章的全部内容，感谢耐心观看
****后端WebApi预览地址：http://139.155.137.144:8880/swagger/index.html
前端vue 预览地址：http://139.155.137.144:8881
关注公众号：发送【权限】，获取源码
有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。
关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界