feat: Improve the front-end permission access logic and sample code

packages/business/access/src/code-authority.vue

@@ -0,0 +1,29 @@
+<!--
+ Access control component for fine-grained access control.
+-->
+<script lang="ts" setup>
+import { useAccess } from './use-access';
+
+interface Props {
+  /**
+   * Specified codes is visible
+   * @default []
+   */
+  codes?: string[];
+}
+
+defineOptions({
+  name: 'CodeAuthority',
+});
+
+withDefaults(defineProps<Props>(), {
+  codes: () => [],
+});
+
+const { hasAuthByRole } = useAccess();
+</script>
+
+<template>
+  <slot v-if="!codes"></slot>
+  <slot v-else-if="hasAuthByRole(codes)"></slot>
+</template>

packages/business/access/src/index.ts

@@ -1,3 +1,4 @@
+export { default as CodeAuthority } from './code-authority.vue';
 export * from './generate-menu-and-routes';
 export { default as RoleAuthority } from './role-authority.vue';
 export type * from './types';

packages/business/access/src/role-authority.vue

@@ -2,25 +2,28 @@
  Access control component for fine-grained access control.
 -->
 <script lang="ts" setup>
+import { useAccess } from './use-access';
+
 interface Props {
   /**
    * Specified role is visible
-   * - When the permission mode is 'frontend', the value can be a role value.
-   * - When the permission mode is 'backend', the value can be a code permission value.
-   * @default ''
+   * @default []
    */
   roles?: string[];
 }
 
 defineOptions({
-  name: 'FrontendAuthority',
+  name: 'RoleAuthority',
 });
 
 withDefaults(defineProps<Props>(), {
   roles: undefined,
 });
+
+const { hasAuthByRole } = useAccess();
 </script>
 
 <template>
-  <slot></slot>
+  <slot v-if="!roles"></slot>
+  <slot v-else-if="hasAuthByRole(roles)"></slot>
 </template>

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

@@ -1,13 +1,26 @@
 import { computed } from 'vue';
 
 import { preferences } from '@vben-core/preferences';
+import { useCoreAccessStore } from '@vben-core/stores';
 
 function useAccess() {
+  const coreAccessStore = useCoreAccessStore();
   const accessMode = computed(() => {
     return preferences.app.accessMode;
   });
 
-  return { accessMode };
+  /**
+   * 基于角色判断是否有权限
+   * @description: Determine whether there is permission，The role is judged by the user's role
+   * @param roles
+   */
+  function hasAuthByRole(roles: string[]) {
+    const userRoleSet = new Set(coreAccessStore.getUserRoles);
+    const intersection = roles.filter((item) => userRoleSet.has(item));
+    return intersection.length > 0;
+  }
+
+  return { accessMode, hasAuthByRole };
 }
 
 export { useAccess };