VUE3你不知道的按钮与菜单权限

　　前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以看看之前的基础搭建前端开发从零搭建VUE后台深入了解VUE3实践搭建后台（二）深入了解VUE3实践搭建后台（三）深入了解VUE3实践搭建后台（四）深入了解VUE3实践搭建后台（五）前言
　　上一篇文章我们获取了菜单以及路由的添加。今天我们就来说说菜单的数据结构，以及我们要怎么添加菜单权限和按钮权限开始在开始之前，我们先来设想一下菜单和按钮权限的设计。先说说菜单吧，菜单我们需要不同的用户登录，显示不同的菜单。我们可以通过后台把对应用户的菜单返回，我们在通过
　　router。addRoute添加的路由中。不清楚的同学可以查看一下上一章。这样我们的菜单就完成了。那我们的按钮权限呢？我们下面把主要精力放在按钮的权限上。我们先看看后台返回的数据吧
　　后台返回的菜单数据（包含按钮）constdata〔｛permissionId：1，权限idpermissionName：首页，权限名称parentId：0，父级menuUrl：home，路由hidden：false，是否隐藏component：homeindex。vue，组件buttonList：〔homelist〕，按钮权限childrenList：〔〕，子级数据｝，。。。〕；我们假设后端返回给我们的数据就是这样的。下面我们就开始按钮的权限了。按钮权限的设计
　　我们这里的按钮权限设计，安装最简单的模式来。就是判断当前的用户是否有当前按钮的权限。直接一点就是判断当前buttonList中是否有指定的按钮路由。
　　思路我们已经有了，下面我们就开始进行代码的编写了。我们分成两步来实现。
　　1、合并所有的按钮权限到一个数组中去。
　　不知道大家还记不记得，在上一章我们在Admin。vue页面中获取到了菜单。返回的按钮菜单letdatastore。state。global。menus；
　　下面我们就从菜单中提取按钮权限合并按钮权限letbtnListfilterMenusList（data）；store。commit（setAuthBtns，btnList）；在这里我们把处理后的菜单存放到了store中去了，我把处理的函数filterMenusList，放到了utils。js文件中了
　　utils。js处理菜单数组，返回按钮集合menus菜单数据exportfunctionfilterMenusList（menus）｛constbuttonList〔〕；menus。length0menus。map（（vo，key）｛if（vo。buttonList。length0vo。childrenList。length0）｛buttonList〔vo〔path〕〕（permissionList（vo。childrenList））；｝else｛buttonList〔vo〔path〕〕vo。buttonList；｝｝）；returnbuttonList；｝
　　这里按钮的数据我们已经获取到了，下面我们就是使用了
　　2、使用按钮权限
　　在util下创建permission。jsimportstorefromstore；用来控制按钮的显示exportfunctionhasBtnPermission（permission）｛constmyBtnsstore。state。authBtns；returnmyBtns。includes（permission）；｝
　　在mian。js文件中调用import｛hasBtnPermission｝from。utilpermission引用按钮权限文件绑定到全局属性中去app。config。globalProperties。hasPerhasBtnPermission；
　　3、使用elbuttontypeprimaryvifhasPer（aboutadd）添加关于我们elbutton
　　结束语
　　已经就是菜单与按钮权限的设计流程，这个也是最简单的。其实在实际应用中我们还有更复杂的设计。如果你有什么问题，或者有新的设计思路可以和大家一起交流一下。