z9130
/
pansoft-plrl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: optimize the access directive to support string passing (#4246) 

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

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

* docs: 更新中英文文档示例以支持字符串权限码绑定更新了中文和英文文档中的示例
This commit is contained in:
handsomeFu 2024-08-27 11:17:04 +08:00 committed by GitHub
parent 2ba28488a4
commit 8adb22847d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/en/guide/in-depth/access.md
View File

@ -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']">

9
docs/src/guide/in-depth/access.md
View File

@ -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>

16
packages/effects/access/src/directive.ts
View File

@ -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();
}
}