vue3-根据权限点控制按钮进行身份验证通过后再执行按钮事件

在一些管理系统中，经常会涉及到一些敏感操作，比如更改密码/删除人员等行为

为了保证用户信息安全，可在一些敏感操作前进行身份认证，认证通过后才让继续操作，那么我们今天结合自定义指令来实现这一功能

1.封装好你的全局弹窗组件，并在全局文件或入口文件中引入（如：App.vue）

const submit=()=> {
  visible.value = false;
  resolveRef.value && resolveRef.value(true);//更改resolveRef让openSecurityVerification返回的Promise 变为已完成状态
}

// 全局Promise调用方法
let openSecurityVerification;
if (!import.meta.env.SSR) {
  openSecurityVerification = function (options = {}) {
    visible.value = true;
    return new Promise(resolve => {
      resolveRef.value = resolve;
    });
  };
  // 挂载在window上，方便调用
  window.openSecurityVerification = openSecurityVerification;
}

2.封装判断用户是否有权限方法

export const hasAuth= btnPermissions => {
  // 用户的权限码
  // const userStore = useUserStore();
  // const userPermission = userStore.permission;
  const userPermission = ["1001", "1002", "1003"];//权限key数组，一般后端返回

  // 按钮所需单个权限code
  if (!Array.isArray(btnPermissions)) {
    return userPermission.indexOf(btnPermissions) !== -1;
  }

  // 按钮所需多个权限code
  for (const btnPermissionCode of btnPermissions) {
    if (!userPermission.includes(btnPermissionCode)) {
      return false;
    }
  }

  return true;
};

3.封装自定义指令，等待验证完成后执行事件

import { hasAuth } from "@/router/utils";
export const securityVerify = {
  mounted(el, binding) {
    // 兼容对象和字符串两种写法，这里是接收自定义指令传入的事件，验证后可执行传入的事件
    let key = binding.value;
    let handler = null;
    if (typeof binding.value === "object" && binding.value !== null) {
      key = binding.value.key;
      handler = binding.value.handler;
    }
    if (!hasAuth(key)) return;

    el.addEventListener("click", async (e) => {
      e && e.stopPropagation();
      const open = window.openSecurityVerification;
      if (typeof open === "function") {
        const result = await open();
        if (result && typeof handler === "function") {
          handler(e); 
        }
      } else if (typeof handler === "function") {
        handler(e);
      }
    });
  },

};

4.在App.vue中全局注册

5.在按钮处通过自定义指令调用

const nextStep = () => {
  console.log(11);
};
  <el-button
      type="primary"
      v-security-verify="{
        key: 'HomeMng.Home.Query',
        handler: nextStep
      }"
      >下一步</el-button
    >