VUE3 你不知道的按钮与菜单权限_vue 菜单权限控制
前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以看看之前的基础搭建
前言
上一篇文章我们获取了菜单以及路由的添加。今天我们就来说说菜单的数据结构，以及我们要怎么添加菜单权限和按钮权限
开始
在开始之前，我们先来设想一下菜单和按钮权限的设计。先说说菜单吧，菜单我们需要不同的用户登录，显示不同的菜单。我们可以通过后台把对应用户的菜单返回，我们在通过
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.js
import 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、使用
添加关于我们 结束语
已经就是菜单与按钮权限的设计流程，这个也是最简单的。其实在实际应用中我们还有更复杂的设计。如果你有什么问题，或者有新的设计思路可以和大家一起交流一下。