Vue3中的按钮级别权限控制

前言：后台管理系统基本上都绕不开权限管理这一个模块，不同角色有不同的菜单，不同的功能权限，具体的权限控制理论网上也有很多，这里只记录我工作中业务的处理。

这里介绍的是采用指令的方式对按钮级别的权限控制

vue3 + vuex

话不多说，先上代码

1、在工具包utils下创建了一个registerDirective.js

import store from "@/store";
/**
 * 注册全局自定义指令
 * @param {*} app
 */
export default function registerDirective(app) {
	// 按钮级别权限控制
	app.directive("permission", {
		mounted(el, binding) {
			const allowLists = store.state.login.permissions;
			if (!binding.value || !Array.isArray(allowLists) || !allowLists.includes(binding.value)) {
				el.parentNode && el.parentNode.removeChild(el); //移除元素
			}
		},
	});

	// 其他全局指令...
}

导入的store是vuex封装的，在module里面的login的permissions中存储着请求回来的权限信息。 如果不符合条件，那么这里直接采取将整个元素给移除掉**。**

数据如图：

2、在main.js文件中调用这个方法,这里只保留调用的代码

import { createApp } from "vue";
import App from "./App.vue";
import { registerDirective } from "@/utils";

const app = createApp(App);
registerDirective(app);
app.mount("#app");

这样就可以直接使用了，不过，绑定的值都是写死的，所以要提前沟通约定好

<template>
    <a-button v-permission="'order-add'">创建订单</a-button>
</template>