feat: add v-access directive

packages/effects/access/src/access-control.vue

@@ -7,17 +7,17 @@ import { computed } from 'vue';
 import { useAccess } from './use-access';
 
 interface Props {
+  /**
+   * Specified codes is visible
+   * @default []
+   */
+  permissions?: string[];
+
   /**
    * 通过什么方式来控制组件，如果是 role，则传入角色，如果是 code，则传入权限码
    * @default 'role'
    */
   type?: 'code' | 'role';
-
-  /**
-   * Specified codes is visible
-   * @default []
-   */
-  value?: string[];
 }
 
 defineOptions({
@@ -25,19 +25,21 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  permissions: () => [],
   type: 'role',
-  value: () => [],
 });
 
-const { hasAuthByCodes, hasAuthByRoles } = useAccess();
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
 
 const hasAuth = computed(() => {
-  const { type, value } = props;
-  return type === 'role' ? hasAuthByRoles(value) : hasAuthByCodes(value);
+  const { permissions, type } = props;
+  return type === 'role'
+    ? hasAccessByRoles(permissions)
+    : hasAccessByCodes(permissions);
 });
 </script>
 
 <template>
-  <slot v-if="!value"></slot>
+  <slot v-if="!permissions"></slot>
   <slot v-else-if="hasAuth"></slot>
 </template>

packages/effects/access/src/directive.ts

@@ -0,0 +1,38 @@
+/**
+ * Global authority directive
+ * Used for fine-grained control of component permissions
+ * @Example v-auth="RoleEnum.TEST"
+ */
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { useAccess } from './use-access';
+
+function isAccessible(el: Element, binding: any) {
+  const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+  const value = binding.value;
+
+  if (!value) {
+    return;
+  }
+  const authMethod =
+    accessMode.value === 'frontend' ? hasAccessByRoles : hasAccessByCodes;
+
+  if (!authMethod(value)) {
+    el?.remove();
+  }
+}
+
+const mounted = (el: Element, binding: DirectiveBinding<string | string[]>) => {
+  isAccessible(el, binding);
+};
+
+const authDirective: Directive = {
+  mounted,
+};
+
+export function installAccessDirective(app: App) {
+  app.directive('access', authDirective);
+}
+
+export default authDirective;

packages/effects/access/src/index.ts

@@ -1,3 +1,4 @@
 export { default as AccessControl } from './access-control.vue';
+export * from './directive';
 export * from './generate-accessible';
 export * from './use-access';

packages/effects/access/src/use-access.ts

@@ -14,7 +14,7 @@ function useAccess() {
    * @description: Determine whether there is permission，The role is judged by the user's role
    * @param roles
    */
-  function hasAuthByRoles(roles: string[]) {
+  function hasAccessByRoles(roles: string[]) {
     const userRoleSet = new Set(coreAccessStore.userRoles);
     const intersection = roles.filter((item) => userRoleSet.has(item));
     return intersection.length > 0;
@@ -25,7 +25,7 @@ function useAccess() {
    * @description: Determine whether there is permission，The permission code is judged by the user's permission code
    * @param codes
    */
-  function hasAuthByCodes(codes: string[]) {
+  function hasAccessByCodes(codes: string[]) {
     const userCodesSet = new Set(coreAccessStore.accessCodes);
 
     const intersection = codes.filter((item) => userCodesSet.has(item));
@@ -43,8 +43,8 @@ function useAccess() {
 
   return {
     accessMode,
-    hasAuthByCodes,
-    hasAuthByRoles,
+    hasAccessByCodes,
+    hasAccessByRoles,
     toggleAccessMode,
   };
 }