From e662e9a095e07f2cda8e92ba63be3f1b18a254cb Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Wed, 2 Oct 2024 02:19:04 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E9=89=B4=E6=9D=83=E6=8C=87?=
 =?UTF-8?q?=E4=BB=A4=E3=80=81=E9=89=B4=E6=9D=83=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Auth/index.vue          | 13 +++--
 src/components/AuthAll/index.vue       | 20 -------
 src/types/components.d.ts              |  1 -
 src/utils/directive.ts                 | 23 +++-----
 src/views/permission_example/index.vue | 74 +++++++++++++-------------
 5 files changed, 52 insertions(+), 79 deletions(-)
 delete mode 100755 src/components/AuthAll/index.vue

diff --git a/src/components/Auth/index.vue b/src/components/Auth/index.vue
index a25fe087..369fd05c 100755
--- a/src/components/Auth/index.vue
+++ b/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>
diff --git a/src/components/AuthAll/index.vue b/src/components/AuthAll/index.vue
deleted file mode 100755
index 3c0f36ec..00000000
--- a/src/components/AuthAll/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'AuthAll',
-})
-
-const props = defineProps<{
-  value: string[]
-}>()
-
-function check() {
-  return useAuth().authAll(props.value)
-}
-</script>
-
-<template>
-  <div>
-    <slot v-if="check()" />
-    <slot v-else name="no-auth" />
-  </div>
-</template>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 2d837636..7629dc7d 100755
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Auth: typeof import('./../components/Auth/index.vue')['default']
-    AuthAll: typeof import('./../components/AuthAll/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FixedActionBar: typeof import('./../components/FixedActionBar/index.vue')['default']
     HButton: typeof import('./../layouts/ui-kit/HButton.vue')['default']
diff --git a/src/utils/directive.ts b/src/utils/directive.ts
index bbd2481a..93d4df78 100755
--- a/src/utils/directive.ts
+++ b/src/utils/directive.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'
+    }
   })
 }
diff --git a/src/views/permission_example/index.vue b/src/views/permission_example/index.vue
index 6ab35451..7c689a50 100755
--- a/src/views/permission_example/index.vue
+++ b/src/views/permission_example/index.vue
@@ -14,7 +14,6 @@ const settingsStore = useSettingsStore()
 const userStore = useUserStore()
 
 const { auth, authAll } = useAuth()
-const mainPage = useMainPage()
 
 // 模拟账号切换
 async function accountChange(val: any) {
@@ -23,7 +22,6 @@ async function accountChange(val: any) {
     password: '',
   })
   await userStore.getPermissions()
-  mainPage.reload()
 }
 function goTest() {
   router.push({
@@ -76,41 +74,6 @@ function permissionCheck2(permissions: string[]) {
             点击访问
           </ElButton>
         </div>
-        <h3>鉴权组件（请对照代码查看）</h3>
-        <div>
-          <Auth value="permission.browse" style="margin-bottom: 10px;">
-            <ElTag>你有 permission.browse 权限</ElTag>
-            <template #no-auth>
-              <ElTag type="danger">
-                你没有 permission.browse 权限
-              </ElTag>
-            </template>
-          </Auth>
-          <Auth value="permission.create" style="margin-bottom: 10px;">
-            <ElTag>你有 permission.create 权限</ElTag>
-            <template #no-auth>
-              <ElTag type="danger">
-                你没有 permission.create 权限
-              </ElTag>
-            </template>
-          </Auth>
-          <Auth :value="['permission.browse', 'permission.create']" style="margin-bottom: 10px;">
-            <ElTag>你有 permission.browse 或 permission.create 权限</ElTag>
-            <template #no-auth>
-              <ElTag type="danger">
-                你没有 permission.browse 或 permission.create 权限
-              </ElTag>
-            </template>
-          </Auth>
-          <AuthAll :value="['permission.browse', 'permission.create']">
-            <ElTag>你有 permission.browse 和 permission.create 权限</ElTag>
-            <template #no-auth>
-              <ElTag type="danger">
-                你没有 permission.browse 和 permission.create 权限
-              </ElTag>
-            </template>
-          </AuthAll>
-        </div>
         <h3>鉴权指令（请对照代码查看）</h3>
         <div>
           <div v-auth="'permission.browse'">
@@ -122,10 +85,45 @@ function permissionCheck2(permissions: string[]) {
           <div v-auth="['permission.browse', 'permission.create']">
             如果你有 permission.browse 或 permission.create 权限则能看到这句话
           </div>
-          <div v-auth-all="['permission.browse', 'permission.create']">
+          <div v-auth.all="['permission.browse', 'permission.create']">
             如果你有 permission.browse 和 permission.create 权限则能看到这句话
           </div>
         </div>
+        <h3>鉴权组件（请对照代码查看）</h3>
+        <div class="flex-col-start gap-2">
+          <Auth value="permission.browse">
+            <ElTag>你有 permission.browse 权限</ElTag>
+            <template #no-auth>
+              <ElTag type="danger">
+                你没有 permission.browse 权限
+              </ElTag>
+            </template>
+          </Auth>
+          <Auth value="permission.create">
+            <ElTag>你有 permission.create 权限</ElTag>
+            <template #no-auth>
+              <ElTag type="danger">
+                你没有 permission.create 权限
+              </ElTag>
+            </template>
+          </Auth>
+          <Auth :value="['permission.browse', 'permission.create']">
+            <ElTag>你有 permission.browse 或 permission.create 权限</ElTag>
+            <template #no-auth>
+              <ElTag type="danger">
+                你没有 permission.browse 或 permission.create 权限
+              </ElTag>
+            </template>
+          </Auth>
+          <Auth :value="['permission.browse', 'permission.create']" all>
+            <ElTag>你有 permission.browse 和 permission.create 权限</ElTag>
+            <template #no-auth>
+              <ElTag type="danger">
+                你没有 permission.browse 和 permission.create 权限
+              </ElTag>
+            </template>
+          </Auth>
+        </div>
         <h3>鉴权函数（请对照代码查看）</h3>
         <div>
           <ElButtonGroup style="display: block; margin-bottom: 10px;">