refactor!: 重构鉴权指令、鉴权组件

Author: hooray

src/components/Auth/index.vue

@@ -5,16 +5,19 @@ defineOptions({
 
 const props = defineProps<{
   value: string | string[]
+  all?: boolean
 }>()
 
+const auth = useAuth()
+
 function check() {
-  return useAuth().auth(props.value)
+  return props.all
+    ? auth.authAll(typeof props.value === 'string' ? [props.value] : props.value)
+    : auth.auth(props.value)
 }
 </script>
 
 <template>
-  <div>
-    <slot v-if="check()" />
-    <slot v-else name="no-auth" />
-  </div>
+  <slot v-if="check()" />
+  <slot v-else name="no-auth" />
 </template>

src/components/AuthAll/index.vue

@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     ActionContainer: typeof import('./../components/ActionContainer/index.vue')['default']
     Auth: typeof import('./../components/Auth/index.vue')['default']
-    AuthAll: typeof import('./../components/AuthAll/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     HBadge: typeof import('./../views/ui-kit/HBadge.vue')['default']
     HButton: typeof import('./../views/ui-kit/HButton.vue')['default']

src/types/components.d.ts

@@ -1,19 +1,12 @@
-import type { App } from 'vue'
+import type { App, DirectiveBinding } from 'vue'
 
 export default function directive(app: App) {
-  // 注册 v-auth 和 v-auth-all 指令
-  app.directive('auth', {
-    mounted: (el, binding) => {
-      if (!useAuth().auth(binding.value)) {
-        el.remove()
-      }
-    },
-  })
-  app.directive('auth-all', {
-    mounted: (el, binding) => {
-      if (!useAuth().authAll(binding.value)) {
-        el.remove()
-      }
-    },
+  app.directive('auth', (el: HTMLElement, binding: DirectiveBinding) => {
+    if (binding.modifiers.all ? useAuth().authAll(binding.value) : useAuth().auth(binding.value)) {
+      el.style.display = ''
+    }
+    else {
+      el.style.display = 'none'
+    }
   })
 }

src/utils/directive.ts

@@ -113,7 +113,7 @@ const handleSubMenuClick: MenuInjection['handleSubMenuClick'] = (index, indexPat
 function initMenu() {
   const activeItem = activeIndex.value && items.value[activeIndex.value]
   setSubMenusActive(activeIndex.value)
-  if (!activeItem || props.collapse) {
+  if (!activeItem || isMenuPopup.value || props.collapse) {
     return
   }
   // 展开该菜单项的路径上所有子菜单