重构鉴权指令、鉴权组件

fantastic-admin · Oct 8, 2024 · e662e9a · e662e9a
1 parent 1824268
commit e662e9a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 64 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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,55 +74,55 @@ function permissionCheck2(permissions: string[]) {
             点击访问
           </ElButton>
         </div>
-        <h3>鉴权组件（请对照代码查看）</h3>
+        <h3>鉴权指令（请对照代码查看）</h3>
         <div>
-          <Auth value="permission.browse" style="margin-bottom: 10px;">
+          <div v-auth="'permission.browse'">
+            如果你有 permission.browse 权限则能看到这句话
+          </div>
+          <div v-auth="'permission.create'">
+            如果你有 permission.create 权限则能看到这句话
+          </div>
+          <div v-auth="['permission.browse', 'permission.create']">
+            如果你有 permission.browse 或 permission.create 权限则能看到这句话
+          </div>
+          <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" style="margin-bottom: 10px;">
+          <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']" style="margin-bottom: 10px;">
+          <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>
-          <AuthAll :value="['permission.browse', 'permission.create']">
+          <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>
-          </AuthAll>
-        </div>
-        <h3>鉴权指令（请对照代码查看）</h3>
-        <div>
-          <div v-auth="'permission.browse'">
-            如果你有 permission.browse 权限则能看到这句话
-          </div>
-          <div v-auth="'permission.create'">
-            如果你有 permission.create 权限则能看到这句话
-          </div>
-          <div v-auth="['permission.browse', 'permission.create']">
-            如果你有 permission.browse 或 permission.create 权限则能看到这句话
-          </div>
-          <div v-auth-all="['permission.browse', 'permission.create']">
-            如果你有 permission.browse 和 permission.create 权限则能看到这句话
-          </div>
+          </Auth>
         </div>
         <h3>鉴权函数（请对照代码查看）</h3>
         <div>