前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以看看之前的基础搭建

• 前端开发从零搭建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.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、使用

<el-button type="primary" v-if="hasPer('about/add')">添加关于我们</el-button>

结束语

已经就是菜单与按钮权限的设计流程，这个也是最简单的。其实在实际应用中我们还有更复杂的设计。如果你有什么问题，或者有新的设计思路可以和大家一起交流一下。