重构鉴权指令、鉴权组件

one-step-admin · Oct 2, 2024 · c6d5b3c · c6d5b3c
1 parent 233168b
commit c6d5b3c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 74 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
@@ -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']
     ComponentBasicExampleAlert: typeof import('./../components/ComponentBasicExampleAlert/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     HBadge: typeof import('./../views/ui-kit/HBadge.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/windows/PermissionExample/index.vue b/src/views/windows/PermissionExample/index.vue
@@ -1,26 +1,19 @@
 <script setup lang="ts">
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
-import { ElLoading, ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
 
 const { auth, authAll } = useAuth()
 const settingsStore = useSettingsStore()
 const userStore = useUserStore()
 
-function accountChange(val: any) {
-  ElLoading.service({
-    lock: true,
-    text: '帐号切换中',
-    background: 'rgba(0, 0, 0, 0.7)',
-  })
-  userStore.login({
+// 模拟账号切换
+async function accountChange(val: any) {
+  await userStore.login({
     account: val,
     password: '',
-  }).then(() => {
-    setTimeout(() => {
-      location.reload()
-    }, 1000)
   })
+  await userStore.getPermissions()
 }
 function permissionCheck(permissions: string | string[]) {
   if (auth(permissions)) {
@@ -54,55 +47,55 @@ function permissionCheck2(permissions: string[]) {
         </ElRadioGroup>
         <h3>帐号权限</h3>
         <div>{{ userStore.permissions }}</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>