From 8adb22847d32bea91888d38ad2e3ee3604597c7a Mon Sep 17 00:00:00 2001
From: handsomeFu <fzq980219@gmail.com>
Date: Tue, 27 Aug 2024 11:17:04 +0800
Subject: [PATCH] perf: optimize the access directive to support string passing
 (#4246)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: 优化access指令用法并改进参数类型

重构access权限指令以接受角色和代码形式的权限检查。通过支持数组和字符串作为指令值来简化用法，从而提高灵活性。此外，改进指令绑定类型定义以提升类型安全性。

* docs: 更新中英文文档示例以支持字符串权限码绑定更新了中文和英文文档中的示例
---
 docs/src/en/guide/in-depth/access.md     | 10 +++++++---
 docs/src/guide/in-depth/access.md        |  9 +++++++--
 packages/effects/access/src/directive.ts | 16 ++++++++++------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/docs/src/en/guide/in-depth/access.md b/docs/src/en/guide/in-depth/access.md
index 6a20d6a1..05997d7d 100644
--- a/docs/src/en/guide/in-depth/access.md
+++ b/docs/src/en/guide/in-depth/access.md
@@ -231,10 +231,12 @@ const { hasAccessByCodes } = useAccess();
 
 #### Directive Method
 
+> The directive supports binding single or multiple permission codes. For a single one, you can pass a string or an array containing one permission code, and for multiple permission codes, you can pass an array.
+
 ```vue
 <template>
-  <Button class="mr-4" v-access:code="['AC_100100']">
-    Visible to Super account ["AC_1000001"]
+  <Button class="mr-4" v-access:code="'AC_100100'">
+    Visible to Super account 'AC_100100'
   </Button>
   <Button class="mr-4" v-access:code="['AC_100030']">
     Visible to Admin account ["AC_100010"]
@@ -296,9 +298,11 @@ const { hasAccessByRoles } = useAccess();
 
 #### Directive Method
 
+> The directive supports binding single or multiple permission codes. For a single one, you can pass a string or an array containing one permission code, and for multiple permission codes, you can pass an array.
+
 ```vue
 <template>
-  <Button class="mr-4" v-access:role="['super']">
+  <Button class="mr-4" v-access:role="'super'">
     Visible to Super account
   </Button>
   <Button class="mr-4" v-access:role="['admin']">
diff --git a/docs/src/guide/in-depth/access.md b/docs/src/guide/in-depth/access.md
index 1bfee2ef..5558564c 100644
--- a/docs/src/guide/in-depth/access.md
+++ b/docs/src/guide/in-depth/access.md
@@ -229,10 +229,12 @@ const { hasAccessByCodes } = useAccess();
 
 #### 指令方式
 
+> 指令支持绑定单个或多个权限码。单个时可以直接传入字符串或数组中包含一个权限码，多个权限码则传入数组。
+
 ```vue
 <template>
-  <Button class="mr-4" v-access:code="['AC_100100']">
-    Super 账号可见 ["AC_1000001"]
+  <Button class="mr-4" v-access:code="'AC_100100'">
+    Super 账号可见 'AC_100100'
   </Button>
   <Button class="mr-4" v-access:code="['AC_100030']">
     Admin 账号可见 ["AC_100010"]
@@ -294,8 +296,11 @@ const { hasAccessByRoles } = useAccess();
 
 #### 指令方式
 
+> 指令支持绑定单个或多个权限码。单个时可以直接传入字符串或数组中包含一个权限码，多个权限码则传入数组。
+
 ```vue
 <template>
+  <Button class="mr-4" v-access:role="'super'"> Super 角色可见 </Button>
   <Button class="mr-4" v-access:role="['super']"> Super 角色可见 </Button>
   <Button class="mr-4" v-access:role="['admin']"> Admin 角色可见 </Button>
   <Button class="mr-4" v-access:role="['user']"> User 角色可见 </Button>
diff --git a/packages/effects/access/src/directive.ts b/packages/effects/access/src/directive.ts
index c76452f4..35d9d517 100644
--- a/packages/effects/access/src/directive.ts
+++ b/packages/effects/access/src/directive.ts
@@ -1,26 +1,30 @@
 /**
  * Global authority directive
  * Used for fine-grained control of component permissions
- * @Example v-auth="RoleEnum.TEST"
+ * @Example v-access:role="[ROLE_NAME]" or v-access:role="ROLE_NAME"
+ * @Example v-access:code="[ROLE_CODE]" or v-access:code="ROLE_CODE"
  */
 import type { App, Directive, DirectiveBinding } from 'vue';
 
 import { useAccess } from './use-access';
 
-function isAccessible(el: Element, binding: any) {
+function isAccessible(
+  el: Element,
+  binding: DirectiveBinding<string | string[]>,
+) {
   const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
 
   const value = binding.value;
 
-  if (!value) {
-    return;
-  }
+  if (!value) return;
   const authMethod =
     accessMode.value === 'frontend' && binding.arg === 'role'
       ? hasAccessByRoles
       : hasAccessByCodes;
 
-  if (!authMethod(value)) {
+  const values = Array.isArray(value) ? value : [value];
+
+  if (!authMethod(values)) {
     el?.remove();
   }
 }