feat: add Authorized common component

auto-imports.d.ts

@@ -228,7 +228,7 @@ declare global {
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
-  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePermission: typeof import('./src/composables/common/usePermission/index')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
@@ -546,7 +546,7 @@ declare module 'vue' {
     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
-    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePermission: UnwrapRef<typeof import('./src/composables/common/usePermission/index')['usePermission']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>

components.d.ts

@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    Authorized: typeof import('./src/components/common/Authorized.vue')['default']
     BaseSpin: typeof import('./src/components/common/BaseSpin.vue')['default']
     BaseTable: typeof import('./src/components/common/BaseTable.vue')['default']
     BaseTableHandle: typeof import('./src/components/common/BaseTableHandle.vue')['default']

src/components/common/Authorized.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AuthorizedProps } from '~/types'
+
+defineOptions({ name: 'Authorize' })
+const props = defineProps<AuthorizedProps>()
+
+const permission = toRef(props, 'permission')
+const { isHavePermission } = usePermission(permission.value)
+</script>
+
+<template>
+  <slot v-if="isHavePermission" />
+</template>

src/composables/common/usePermission/index.ts

@@ -6,5 +6,7 @@ export const usePermission = (permissionKeys: string[]) => {
     if (accountPermissionList.includes(permission)) return true
     return false
   })
-  return isHavePermission
+  return {
+    isHavePermission,
+  }
 }

src/types/components/Authorized.ts

@@ -0,0 +1,3 @@
+export interface AuthorizedProps {
+  permission: string[]
+}

src/types/components/index.ts

@@ -4,3 +4,4 @@ export * from './BaseTableSearch'
 export * from './Vditor'
 export * from './WangEditor'
 export * from './XGPlayer'
+export * from './Authorized'

src/views/permission/PermissionButton.vue

@@ -1,19 +1,43 @@
+<script setup lang="ts">
+import Authorized from '~/components/common/Authorized.vue'
+
+</script>
+
 <template>
   <div
-    class="w-full h-40 flex flex-col items-center justify-center
-    text-base space-y-4 rounded-sm border border-vBorderLight dark:border-vBorderDark"
+    class="w-full h-40 flex flex-col items-center justify-center text-base
+    space-y-4 rounded-sm border border-vBorderLight dark:border-vBorderDark"
   >
-    <NButton
-      v-permission="['sys:admin:*']"
-      type="primary"
-    >
-      超级管理员按钮
-    </NButton>
-    <NButton
-      v-permission="['sys:user:*']"
-      type="primary"
-    >
-      普通管理员按钮
-    </NButton>
+    <div class="text-sm">
+      按钮级别权限提供三种方式: 指定权限、组件权限和钩子函数
+    </div>
+
+    <div>
+      <NButton
+        v-permission="['sys:admin:*']"
+        type="primary"
+      >
+        指令权限-超级管理员按钮
+      </NButton>
+      <NButton
+        v-permission="['sys:user:*']"
+        type="primary"
+      >
+        指令权限-普通管理员按钮
+      </NButton>
+    </div>
+
+    <div>
+      <Authorized :permission="['sys:admin:*']">
+        <NButton type="primary">
+          组件权限-超级管理员按钮
+        </NButton>
+      </Authorized>
+      <Authorized :permission="['sys:user:*']">
+        <NButton type="primary">
+          组件权限-普通管理员按钮
+        </NButton>
+      </Authorized>
+    </div>
   </div>
 </template>