更新

admin/src/install/directives/perms.ts

@@ -2,28 +2,41 @@
  * perm 操作权限处理
  * 指令用法：
  *  <el-button v-perms="['auth.menu/edit']">编辑</el-button>
+ *
+ * 注意：禁止对 Vue 管理的节点使用 parentNode.removeChild，否则会破坏 vnode 与真实 DOM 的对应关系，
+ * Vue 3 内部 WeakMap 缓存会报错：Invalid value used as weak map key。
  */
 
+import type { DirectiveBinding } from 'vue'
 import useUserStore from '@/stores/modules/user'
 
+function applyPerms(el: HTMLElement, binding: DirectiveBinding<string[]>) {
+    const { value } = binding
+    const userStore = useUserStore()
+    const permissions = userStore.perms || []
+    const all_permission = '*'
+    if (!Array.isArray(value)) {
+        throw new Error('like v-perms="[\'auth.menu/edit\']"')
+    }
+    if (value.length === 0) {
+        el.style.removeProperty('display')
+        return
+    }
+    const hasPermission = permissions.some((key: string) => {
+        return all_permission == key || value.includes(key)
+    })
+    if (!hasPermission) {
+        el.style.display = 'none'
+    } else {
+        el.style.removeProperty('display')
+    }
+}
+
 export default {
-    mounted: (el: HTMLElement, binding: any) => {
-        const { value } = binding
-        const userStore = useUserStore()
-        const permissions = userStore.perms
-        const all_permission = '*'
-        if (Array.isArray(value)) {
-            if (value.length > 0) {
-                const hasPermission = permissions.some((key: string) => {
-                    return all_permission == key || value.includes(key)
-                })
-
-                if (!hasPermission) {
-                    el.parentNode && el.parentNode.removeChild(el)
-                }
-            }
-        } else {
-            throw new Error('like v-perms="[\'auth.menu/edit\']"')
-        }
+    mounted: (el: HTMLElement, binding: DirectiveBinding<string[]>) => {
+        applyPerms(el, binding)
+    },
+    updated: (el: HTMLElement, binding: DirectiveBinding<string[]>) => {
+        applyPerms(el, binding)
     }
 }