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) {
-    // 「超级管理员」拥有所有的按钮权限
-    const { roles, perms } = useUserStoreHook().user;
-    if (roles.includes("ROOT")) {
-      return true;
-    }
-    // 「其他角色」按钮权限校验
-    const { value } = binding;
-    if (value) {
-      const requiredPerms = value; // DOM绑定需要的按钮权限标识
-
-      const hasPerm = perms?.some((perm) => {
-        return requiredPerms.includes(perm);
-      });
-
-      if (!hasPerm) {
+    // DOM绑定需要的按钮权限标识
+    const { value: requiredPerms } = binding;
+    if (requiredPerms) {
+      if (!hasAuth(requiredPerms)) {
         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;
-
-    if (value) {
-      const requiredRoles = value; // DOM绑定需要的角色编码
-      const { roles } = useUserStoreHook().user;
-      const hasRole = roles.some((perm) => {
-        return requiredRoles.includes(perm);
-      });
-
-      if (!hasRole) {
+    // DOM绑定需要的角色编码
+    const { value: requiredRoles } = binding;
+    if (requiredRoles) {
+      if (!hasAuth(requiredRoles, "role")) {
         el.parentNode && el.parentNode.removeChild(el);
       }
     } else {