refactor: ♻️ 按钮权限指令优化

src/directive/permission/index.ts

@@ -1,40 +1,64 @@
-import { hasAuth } from "@/plugins/permission";
 import type { Directive, DirectiveBinding } from "vue";
 
+import { useUserStore } from "@/store";
+
 /**
  * 按钮权限
  */
 export const hasPerm: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
-    // DOM绑定需要的按钮权限标识
-    const { value: requiredPerms } = binding;
-    if (requiredPerms) {
-      if (!hasAuth(requiredPerms)) {
-        if (el.parentNode) {
-          el.parentNode.removeChild(el);
-        }
-      }
-    } else {
-      throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"");
+    const requiredPerms = binding.value;
+
+    // 校验传入的权限值是否合法
+    if (!requiredPerms || (typeof requiredPerms !== "string" && !Array.isArray(requiredPerms))) {
+      throw new Error(
+        "需要提供权限标识！例如：v-has-perm=\"'sys:user:add'\" 或 v-has-perm=\"['sys:user:add', 'sys:user:edit']\""
+      );
+    }
+
+    const { roles, perms } = useUserStore().userInfo;
+
+    // 超级管理员拥有所有权限
+    if (roles.includes("ROOT")) {
+      return;
+    }
+
+    // 检查权限
+    const hasAuth = Array.isArray(requiredPerms)
+      ? requiredPerms.some((perm) => perms.includes(perm))
+      : perms.includes(requiredPerms);
+
+    // 如果没有权限，移除该元素
+    if (!hasAuth && el.parentNode) {
+      el.parentNode.removeChild(el);
     }
   },
 };
 
 /**
- * 角色权限
+ * 角色权限指令
  */
 export const hasRole: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
-    // DOM绑定需要的角色编码
-    const { value: requiredRoles } = binding;
-    if (requiredRoles) {
-      if (!hasAuth(requiredRoles, "role")) {
-        if (el.parentNode) {
-          el.parentNode.removeChild(el);
-        }
-      }
-    } else {
-      throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
+    const requiredRoles = binding.value;
+
+    // 校验传入的角色值是否合法
+    if (!requiredRoles || (typeof requiredRoles !== "string" && !Array.isArray(requiredRoles))) {
+      throw new Error(
+        "需要提供角色标识！例如：v-has-role=\"'ADMIN'\" 或 v-has-role=\"['ADMIN', 'TEST']\""
+      );
+    }
+
+    const { roles } = useUserStore().userInfo;
+
+    // 检查是否有对应角色权限
+    const hasAuth = Array.isArray(requiredRoles)
+      ? requiredRoles.some((role) => roles.includes(role))
+      : roles.includes(requiredRoles);
+
+    // 如果没有权限，移除元素
+    if (!hasAuth && el.parentNode) {
+      el.parentNode.removeChild(el);
     }
   },
 };

src/plugins/permission.ts

@@ -64,25 +64,10 @@ export function setupPermission() {
   });
 }
 
-/** 重定向到登录页 */
+// 重定向到登录页
 function redirectToLogin(to: RouteLocationNormalized, next: NavigationGuardNext) {
   const params = new URLSearchParams(to.query as Record<string, string>);
   const queryString = params.toString();
   const redirect = queryString ? `${to.path}?${queryString}` : to.path;
   next(`/login?redirect=${encodeURIComponent(redirect)}`);
 }
-
-/** 判断是否有权限 */
-export function hasAuth(value: string | string[], type: "button" | "role" = "button") {
-  const { roles, perms } = useUserStore().userInfo;
-
-  // 超级管理员 拥有所有权限
-  if (type === "button" && roles.includes("ROOT")) {
-    return true;
-  }
-
-  const auths = type === "button" ? perms : roles;
-  return typeof value === "string"
-    ? auths.includes(value)
-    : value.some((perm) => auths.includes(perm));
-}

src/views/system/user/index.vue

@@ -65,7 +65,7 @@
                 新增
               </el-button>
               <el-button
-                v-hasPerm="['sys:user:delete']"
+                v-hasPerm="'sys:user:delete'"
                 type="danger"
                 icon="delete"
                 :disabled="selectIds.length === 0"
@@ -76,20 +76,14 @@
             </div>
             <div>
               <el-button
-                v-hasPerm="['sys:user:import']"
-                type="default"
+                v-hasPerm="'sys:user:import'"
                 icon="upload"
                 @click="handleOpenImportDialog"
               >
                 导入
               </el-button>
 
-              <el-button
-                v-hasPerm="['sys:user:export']"
-                type="default"
-                icon="download"
-                @click="handleExport"
-              >
+              <el-button v-hasPerm="'sys:user:export'" icon="download" @click="handleExport">
                 导出
               </el-button>
             </div>
@@ -118,7 +112,7 @@
             <el-table-column label="操作" fixed="right" width="220">
               <template #default="scope">
                 <el-button
-                  v-hasPerm="['sys:user:password:reset']"
+                  v-hasPerm="'sys:user:password:reset'"
                   type="primary"
                   icon="RefreshLeft"
                   size="small"
@@ -128,7 +122,7 @@
                   重置密码
                 </el-button>
                 <el-button
-                  v-hasPerm="['sys:user:edit']"
+                  v-hasPerm="'sys:user:edit'"
                   type="primary"
                   icon="edit"
                   link