权限指令

src/directives/permission/hasPermi.ts

@@ -1,24 +1,64 @@
-import type { App } from "vue";
+import { effectScope, watchEffect, type App, type DirectiveBinding } from "vue";
 import { useUserStoreWithOut } from "@/stores/useUserStore";
 
-/** 判断权限的指令 directive */
+const originalDisplayKey = "__hasPermiOriginalDisplay__";
+
+/** 权限校验指令 */
 export function hasPermi(app: App<Element>) {
-  app.directive("hasPermi", (el, binding) => {
-    const { value } = binding;
-
-    if (value && value instanceof Array && value.length > 0) {
-      const hasPermissions = hasPermission(value);
-
-      if (!hasPermissions) {
-        el.parentNode && el.parentNode.removeChild(el);
-      }
-    } else {
-      throw new Error("权限错误");
-    }
+  app.directive("hasPermi", {
+    mounted(el, binding) {
+      const scope = effectScope();
+      el.__hasPermiScope__ = scope;
+
+      scope.run(() => {
+        watchEffect(() => {
+          togglePermission(el, binding);
+        });
+      });
+    },
+    updated(el, binding) {
+      togglePermission(el, binding);
+    },
+    unmounted(el) {
+      el.__hasPermiScope__?.stop();
+      delete el.__hasPermiScope__;
+      restoreDisplay(el);
+    },
   });
 }
 
-/** 判断权限的方法 function */
+function togglePermission(
+  el: HTMLElementWithPermiScope,
+  binding: DirectiveBinding<string[]>,
+) {
+  const { value } = binding;
+
+  if (!(value instanceof Array) || value.length === 0) {
+    throw new Error("权限指令参数错误");
+  }
+
+  if (hasPermission(value)) {
+    restoreDisplay(el);
+    return;
+  }
+
+  if (el[originalDisplayKey] === undefined) {
+    el[originalDisplayKey] = el.style.display;
+  }
+  el.style.display = "none";
+}
+
+function restoreDisplay(el: HTMLElementWithPermiScope) {
+  if (el[originalDisplayKey] !== undefined) {
+    el.style.display = el[originalDisplayKey] || "";
+    delete el[originalDisplayKey];
+    return;
+  }
+
+  el.style.display = "";
+}
+
+/** 权限校验方法 */
 const all_permission = "*:*:*";
 export const hasPermission = (permission: string[]) => {
   const userStore = useUserStoreWithOut();
@@ -27,3 +67,8 @@ export const hasPermission = (permission: string[]) => {
     permission.some((permission) => userStore.permissions.has(permission))
   );
 };
+
+type HTMLElementWithPermiScope = HTMLElement & {
+  __hasPermiScope__?: ReturnType<typeof effectScope>;
+  [originalDisplayKey]?: string;
+};

src/views/login.vue

@@ -21,7 +21,7 @@
         <h1 class="text-2xl font-bold text-center text-black/90">登录</h1>
 
         <!-- 用户名密码登陆 -->
-        <div>
+        <!-- <div>
           <el-form
             :model="form"
             :rules="rules"
@@ -62,7 +62,7 @@
               >
             </div>
           </div>
-        </div>
+        </div> -->
 
         <!-- 钉钉登陆 -->
         <div class="text-center">