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

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