vue3按钮级别权限处理，自定义指令

hasPermi.ts，具体逻辑根据各自的项目自行设计

import router from '@/router';
import { usePermissionStore } from '@/store';

export default {
	// mounted是指令的一个生命周期
	mounted(el, binding) {
		// value 获取用户使用自定义指令绑定的内容
		const { value } = binding;

		// 判断用户使用自定义指令，是否使用正确了
		if (value && value instanceof Array && value.length > 0) {
			let hasPermission = false;
			const permissionStore = usePermissionStore();
			const pagesRoutesMap = permissionStore.pagesRoutesMap;

			if (pagesRoutesMap.size === 0) {
				hasPermission = false;
			} else {
				// 拿到路由的目的是为了解决多个菜单复用同一个组件，然后组件的同一个按钮不同菜单显示不同的权限的问题
				const routePath = (router.currentRoute as any)._value.path || '';
				const target: any = pagesRoutesMap.get(routePath);
				if (!target) {
					hasPermission = false;
				} else {
					const permissions = target.buttonPermissionList || [];
					hasPermission = permissions.some((permission) => {
						return value.includes(permission);
					});
				}
			}
			// 当用户没有这个按钮权限时，设置隐藏这个按钮
			if (!hasPermission) {
				el.parentNode && el.parentNode.removeChild(el);
			}
		} else {
			throw new Error('v-hasPermi value must be an array');
		}
	},
};

index.ts

import hasPermi from './hasPermi';

export default function directive(app) {
	app.directive('hasPermi', hasPermi);
}

在main.ts中引入

import directive from '@/directive'; // 自定义指令

directive(app);

使用

v-hasPermi="['system:user:add', 'system:user:delete']"