feat: add access control docs

Author: wyc001122

docs/src/en/guide/in-depth/access.md

@@ -4,10 +4,11 @@ outline: deep
 
 # Access Control
 
-The framework has built-in two types of access control methods:
+The framework has built-in three types of access control methods:
 
 - Determining whether a menu or button can be accessed based on user roles
 - Determining whether a menu or button can be accessed through an API
+- Using a mixed mode that combines both frontend role-based and backend API-based access control
 
 ## Frontend Access Control
 
@@ -151,6 +152,43 @@ const dashboardMenus = [
 
 At this point, the configuration is complete. You need to ensure that after logging in, the format of the menu returned by the interface is correct; otherwise, access will not be possible.
 
+
+## Mixed Access Control
+
+**Implementation Principle**: The mixed mode combines both frontend and backend access control methods, merging the route tables generated from frontend static routes and backend dynamic routes. This approach ensures both the stability of basic routes and the flexibility of permission control. The system simultaneously filters frontend routes based on roles and retrieves dynamic routes from the backend, ultimately combining these two parts to generate a complete route table.
+
+**Advantage**: It offers the benefits of both frontend and backend control. Core fixed routes can be maintained in the frontend, while business-related dynamic routes are controlled by the backend, enabling a more flexible permission management solution.
+
+**Application Scenario**: Suitable for application systems that have both fixed system function modules and business modules requiring flexible configuration.
+
+### Steps
+
+- Ensure the current mode is set to mixed access control
+
+Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='mixed'`.
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- Configure frontend route permissions (same as frontend access control)
+
+- Ensure the roles returned by the interface match the permissions in the frontend route table (same as frontend access control)
+
+- Ensure the structure of the menu data returned by the interface is correct (same as backend access control)
+
+You need to ensure that user roles match the permission settings in the frontend routes, and that the menu data structure returned by the backend is also correct.
+
+At this point, the mixed mode configuration is complete. The system will process both frontend static routes and backend dynamic routes, merging them to generate the final route table and menu.
+
+
 ## Fine-grained Control of Buttons
 
 In some cases, we need to control the display of buttons with fine granularity. We can control the display of buttons through interfaces or roles.

docs/src/guide/in-depth/access.md

@@ -4,10 +4,11 @@ outline: deep
 
 # 权限
 
-框架内置了两种权限控制方式：
+框架内置了三种权限控制方式：
 
 - 通过用户角色来判断菜单或者按钮是否可以访问
 - 通过接口来判断菜单或者按钮是否可以访问
+- 通过混合模式同时结合前端角色和后端接口控制访问
 
 ## 前端访问控制
 
@@ -159,6 +160,42 @@ const dashboardMenus = [
 
 到这里，就已经配置完成，你需要确保登录后，接口返回的菜单格式正确，否则无法访问。
 
+
+## 混合访问控制
+
+**实现原理**: 混合模式同时结合了前端与后端的访问控制方式，将前端访问控制生成的路由表与后端访问控制生成的路由表合并成完整的路由表。这种方式结合了两种访问控制的优点，实现静态和动态路由的结合。
+
+**优点**: 兼具前端和后端控制的优势，可以将核心固定路由在前端维护，而将业务相关的动态路由交由后端控制，实现更加灵活的权限管理方案。
+
+**应用场景**: 适合既有固定的系统功能模块，又有需要灵活配置的业务模块的应用系统。
+
+### 步骤
+
+- 确保当前模式为混合访问控制模式
+
+调整对应应用目录下的`preferences.ts`，确保`accessMode='mixed'`。
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- 配置前端路由权限（同前端访问控制）
+
+- 确保接口返回的角色和前端路由表的权限匹配（同前端访问控制）
+
+- 确保接口返回的菜单数据结构正确（同后端访问控制）
+
+需要确保用户角色与前端路由的权限设置匹配，同时后端返回的菜单数据结构也需要正确。
+
+到这里，混合模式的配置就已经完成，系统会同时处理前端静态路由和后端动态路由，合并生成最终的路由表和菜单。
+
 ## 按钮细粒度控制
 
 在某些情况下，我们需要对按钮进行细粒度的控制，我们可以借助接口或者角色来控制按钮的显示。