Vue3实现权限按钮指令

import type { App, Directive, DirectiveBinding } from 'vue';

import { usePermission } from '@/hooks/web/usePermission';
import { router } from '../router';
import { unref } from 'vue';

function isAuth(el: Element, binding: any) {
  const { hasPermission } = usePermission();
  const currentRouter = unref(router.currentRoute);
  const routeName: string = currentRouter.name as string;
  if (!binding.value) return;
  const value = `${routeName}-${binding.value}`;
  if (!hasPermission(value)) {
    if (Array.from(el.classList)?.includes('ant-btn-link')) {
      el.setAttribute('disabled', '');
      return;
    }
    if (Array.from(el.classList)?.includes('ant-switch')) {
      el.setAttribute('disabled', '');
      el.classList.add('ant-switch-disabled');
      return;
    }
    const newChild = document.createElement('span');
    // 为了避免影响页面布局，无权限时替换为一个空span
    el.parentNode?.replaceChild(newChild, el);
  }
}

const mounted = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding);
};

const updated = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding);
};

const authDirective: Directive = {
  mounted,
  updated,
};

export function setupPermissionDirective(app: App) {
  app.directive('auth', authDirective);
}

export default authDirective;

这个时候会有一些问题，假设用户 F12 去掉了按钮的 disabled 属性，那就可以操作了，如果在每个点击方法内再做一层处理就有点麻烦，所以有有个 hack 方案可以使用（要看 vue 版本，可能会被修改）

vue3.3.5

app.directive("permissions", {
  mounted(el, binding, vNode) {
    const { getRole } = useRoleStore();
    if (!Array.isArray(binding.value))
      console.error("permission must be array");
    if (!binding.value.includes(getRole)) return;
    const vei_key = Object.getOwnPropertySymbols(el)?.[0];
    if (el[vei_key].onClick) {
      el[vei_key].onClick.value = () =>
        console.error("Administrator privileges are required");
    }
  },
});

3.3.4 以及以下

app.directive("permissions", {
  mounted(el, binding, vNode) {
    const { getRole } = useRoleStore();
    if (!Array.isArray(binding.value))
      console.error("permission must be array");
    if (!binding.value.includes(getRole)) return;
    if (el._vei.onClick) {
      el._vei.onClick.value = () =>
        console.error("Administrator privileges are required");
    }
  },
});