43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
/**
|
|
* Global authority directive
|
|
* Used for fine-grained control of component permissions
|
|
* @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: DirectiveBinding<string | string[]>,
|
|
) {
|
|
const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
|
|
|
|
const value = binding.value;
|
|
|
|
if (!value) return;
|
|
const authMethod =
|
|
accessMode.value === 'frontend' && binding.arg === 'role'
|
|
? hasAccessByRoles
|
|
: hasAccessByCodes;
|
|
|
|
const values = Array.isArray(value) ? value : [value];
|
|
|
|
if (!authMethod(values)) {
|
|
el?.remove();
|
|
}
|
|
}
|
|
|
|
const mounted = (el: Element, binding: DirectiveBinding<string | string[]>) => {
|
|
isAccessible(el, binding);
|
|
};
|
|
|
|
const authDirective: Directive = {
|
|
mounted,
|
|
};
|
|
|
|
export function registerAccessDirective(app: App) {
|
|
app.directive('access', authDirective);
|
|
}
|