feat: Improve the front-end and back-end permission mode and useAccess

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

@@ -9,7 +9,7 @@ interface Props {
    * Specified codes is visible
    * @default []
    */
-  codes?: string[];
+  value?: string[];
 }
 
 defineOptions({
@@ -17,13 +17,13 @@ defineOptions({
 });
 
 withDefaults(defineProps<Props>(), {
-  codes: () => [],
+  value: () => [],
 });
 
-const { hasAuthByRole } = useAccess();
+const { hasAuthByCodes } = useAccess();
 </script>
 
 <template>
-  <slot v-if="!codes"></slot>
-  <slot v-else-if="hasAuthByRole(codes)"></slot>
+  <slot v-if="!value"></slot>
+  <slot v-else-if="hasAuthByCodes(value)"></slot>
 </template>

packages/business/access/src/generate-menu-and-routes/generate-routes-backend.ts

@@ -30,6 +30,7 @@ async function generateRoutesByBackend(
     }
 
     const routes = convertRoutes(menuRoutes, layoutMap, normalizePageMap);
+
     return routes;
   } catch (error) {
     console.error(error);

packages/business/access/src/generate-menu-and-routes/index.ts

@@ -1,4 +1,4 @@
-import type { accessModeType } from '@vben-core/preferences';
+import type { AccessModeType } from '@vben-core/preferences';
 import type { RouteRecordRaw } from 'vue-router';
 
 import type { GeneratorMenuAndRoutesOptions } from '../types';
@@ -10,7 +10,7 @@ import { generateRoutesByBackend } from './generate-routes-backend';
 import { generateRoutesByFrontend } from './generate-routes-frontend';
 
 async function generateMenusAndRoutes(
-  mode: accessModeType,
+  mode: AccessModeType,
   options: GeneratorMenuAndRoutesOptions,
 ) {
   const { router } = options;
@@ -20,7 +20,9 @@ async function generateMenusAndRoutes(
   const accessibleRoutes = await generateRoutes(mode, options);
 
   // 动态添加到router实例内
-  accessibleRoutes.forEach((route) => router.addRoute(route));
+  accessibleRoutes.forEach((route) => {
+    router.addRoute(route);
+  });
 
   // 生成菜单
   const accessibleMenus = await generateMenus1(mode, accessibleRoutes, options);
@@ -33,7 +35,7 @@ async function generateMenusAndRoutes(
  * @param mode
  */
 async function generateRoutes(
-  mode: accessModeType,
+  mode: AccessModeType,
   options: GeneratorMenuAndRoutesOptions,
 ) {
   const { forbiddenComponent, roles, routes } = options;
@@ -60,7 +62,7 @@ async function generateRoutes(
 }
 
 async function generateMenus1(
-  mode: accessModeType,
+  mode: AccessModeType,
   routes: RouteRecordRaw[],
   options: GeneratorMenuAndRoutesOptions,
 ) {

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

@@ -9,7 +9,7 @@ interface Props {
    * Specified role is visible
    * @default []
    */
-  roles?: string[];
+  value?: string[];
 }
 
 defineOptions({
@@ -17,13 +17,13 @@ defineOptions({
 });
 
 withDefaults(defineProps<Props>(), {
-  roles: undefined,
+  value: undefined,
 });
 
-const { hasAuthByRole } = useAccess();
+const { hasAuthByRoles } = useAccess();
 </script>
 
 <template>
-  <slot v-if="!roles"></slot>
-  <slot v-else-if="hasAuthByRole(roles)"></slot>
+  <slot v-if="!value"></slot>
+  <slot v-else-if="hasAuthByRoles(value)"></slot>
 </template>

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

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 
-import { preferences } from '@vben-core/preferences';
+import { preferences, updatePreferences } from '@vben-core/preferences';
 import { useCoreAccessStore } from '@vben-core/stores';
 
 function useAccess() {
@@ -14,13 +14,39 @@ function useAccess() {
    * @description: Determine whether there is permission，The role is judged by the user's role
    * @param roles
    */
-  function hasAuthByRole(roles: string[]) {
+  function hasAuthByRoles(roles: string[]) {
     const userRoleSet = new Set(coreAccessStore.getUserRoles);
     const intersection = roles.filter((item) => userRoleSet.has(item));
     return intersection.length > 0;
   }
 
-  return { accessMode, hasAuthByRole };
+  /**
+   * 基于权限码判断是否有权限
+   * @description: Determine whether there is permission，The permission code is judged by the user's permission code
+   * @param codes
+   */
+  function hasAuthByCodes(codes: string[]) {
+    const userCodesSet = new Set(coreAccessStore.getAccessCodes);
+
+    const intersection = codes.filter((item) => userCodesSet.has(item));
+    return intersection.length > 0;
+  }
+
+  async function toggleAccessMode() {
+    updatePreferences({
+      app: {
+        accessMode:
+          preferences.app.accessMode === 'frontend' ? 'backend' : 'frontend',
+      },
+    });
+  }
+
+  return {
+    accessMode,
+    hasAuthByCodes,
+    hasAuthByRoles,
+    toggleAccessMode,
+  };
 }
 
 export { useAccess };