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

原创

已于 2025-07-09 15:55:19 修改 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2025-07-09 15:53:54 首次发布

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

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

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