refactor: ♻️ 抽离权限判断代码

src/directive/permission/index.ts

@@ -1,4 +1,4 @@
-import { useUserStoreHook } from "@/store/modules/user";
+import { hasAuth } from "@/plugins/permission";
 import { Directive, DirectiveBinding } from "vue";
 
 /**
@@ -6,21 +6,10 @@ import { Directive, DirectiveBinding } from "vue";
  */
 export const hasPerm: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
-    // 「超级管理员」拥有所有的按钮权限
+    // DOM绑定需要的按钮权限标识
-    const { roles, perms } = useUserStoreHook().user;
+    const { value: requiredPerms } = binding;
-    if (roles.includes("ROOT")) {
+    if (requiredPerms) {
-      return true;
+      if (!hasAuth(requiredPerms)) {
-    }
-    // 「其他角色」按钮权限校验
-    const { value } = binding;
-    if (value) {
-      const requiredPerms = value; // DOM绑定需要的按钮权限标识
-
-      const hasPerm = perms?.some((perm) => {
-        return requiredPerms.includes(perm);
-      });
-
-      if (!hasPerm) {
         el.parentNode && el.parentNode.removeChild(el);
       }
     } else {
@@ -36,16 +25,10 @@ export const hasPerm: Directive = {
  */
 export const hasRole: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
-    const { value } = binding;
+    // DOM绑定需要的角色编码
-
+    const { value: requiredRoles } = binding;
-    if (value) {
+    if (requiredRoles) {
-      const requiredRoles = value; // DOM绑定需要的角色编码
+      if (!hasAuth(requiredRoles, "role")) {
-      const { roles } = useUserStoreHook().user;
-      const hasRole = roles.some((perm) => {
-        return requiredRoles.includes(perm);
-      });
-
-      if (!hasRole) {
         el.parentNode && el.parentNode.removeChild(el);
       }
     } else {

src/plugins/permission.ts

@@ -4,6 +4,24 @@ import NProgress from "@/utils/nprogress";
 import { RouteRecordRaw } from "vue-router";
 import { TOKEN_KEY } from "@/enums/CacheEnum";
 
+// 是否有权限
+export function hasAuth(
+  value: string | string[],
+  type: "button" | "role" = "button"
+) {
+  const { roles, perms } = useUserStore().user;
+  //「超级管理员」拥有所有的按钮权限
+  if (type === "button" && roles.includes("ROOT")) {
+    return true;
+  }
+  const auths = type === "button" ? perms : roles;
+  return typeof value === "string"
+    ? auths.includes(value)
+    : auths.some((perm) => {
+        return value.includes(perm);
+      });
+}
+
 export function setupPermission() {
   // 白名单路由
   const whiteList = ["/login"];