You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!--
Access control component for fine - grained access control .
TODO : 可以扩展更完善的功能 ：
1. 支持多个权限码 ， 只要有一个权限码满足即可 或者 多个权限码全部满足
2. 支持多个角色 ， 只要有一个角色满足即可 或者 多个角色全部满足
3. 支持自定义权限码和角色的判断逻辑
-- >
< script lang = "ts" setup >
import { computed } from 'vue' ;
import { useAccess } from './use-access' ;
interface Props {
/**
* Specified codes is visible
* @default []
*/
codes ? : string [ ] ;
/**
* 通过什么方式来控制组件，如果是 role， ， ，
* @default 'role'
*/
type ? : 'code' | 'role' ;
}
defineOptions ( {
name : 'AccessControl' ,
} ) ;
const props = withDefaults ( defineProps < Props > ( ) , {
codes : ( ) => [ ] ,
type : 'role' ,
} ) ;
const { hasAccessByCodes , hasAccessByRoles } = useAccess ( ) ;
const hasAuth = computed ( ( ) => {
const { codes , type } = props ;
return type === 'role' ? hasAccessByRoles ( codes ) : hasAccessByCodes ( codes ) ;
} ) ;
< / script >
< template >
< slot v-if ="!codes" > < / slot >
< slot v -else -if = " hasAuth " > < / slot >
< / template >
