+
+ +
+ +[](LICENSE) + +
+
+ 
+ 
+ 
+
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
+| :-: | :-: | :-: | :-: |
+| 最新2バージョン | 最新2バージョン | 最新2バージョン | 最新2バージョン |
+
+## メンテナー
+
+[@Vben](https://github.com/anncwb)
+
+## スター歴史
+
+[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## 寄付
+
+このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
+
+
+
+Paypal Me
+
+## 貢献者
+
+
+ 
+
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## ライセンス
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/web/README.md b/web/README.md
new file mode 100644
index 0000000..e027949
--- /dev/null
+++ b/web/README.md
@@ -0,0 +1,153 @@
+
+
+
+
+
+](http://godban.github.io/browsers-support-badges/)Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
+| :-: | :-: | :-: | :-: |
+| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## Maintainer
+
+[@Vben](https://github.com/anncwb)
+
+## Star History
+
+[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## Donate
+
+If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
+
+
+
+Paypal Me
+
+## Contributors
+
+
+
+
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## License
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/web/README.zh-CN.md b/web/README.zh-CN.md
new file mode 100644
index 0000000..5a6b191
--- /dev/null
+++ b/web/README.zh-CN.md
@@ -0,0 +1,153 @@
+
+
+
+
+
+](http://godban.github.io/browsers-support-badges/)Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
+| :-: | :-: | :-: | :-: |
+| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 维护者
+
+[@Vben](https://github.com/anncwb)
+
+## Star 历史
+
+[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## 捐赠
+
+如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持！
+
+
+
+Paypal Me
+
+## 贡献者
+
+
+
+
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## 许可证
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/web/apps/backend-mock/README.md b/web/apps/backend-mock/README.md
new file mode 100644
index 0000000..401bda7
--- /dev/null
+++ b/web/apps/backend-mock/README.md
@@ -0,0 +1,15 @@
+# @vben/backend-mock
+
+## Description
+
+Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。线上环境不再提供 mock 集成，可自行部署服务或者对接真实数据，由于 `mock.js` 等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了真实的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。该服务不需要手动启动，已经集成在 vite 插件内，随应用一起启用。
+
+## Running the app
+
+```bash
+# development
+$ pnpm run start
+
+# production mode
+$ pnpm run build
+```
diff --git a/web/apps/backend-mock/api/auth/codes.ts b/web/apps/backend-mock/api/auth/codes.ts
new file mode 100644
index 0000000..7ba0127
--- /dev/null
+++ b/web/apps/backend-mock/api/auth/codes.ts
@@ -0,0 +1,14 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
+export default eventHandler((event) => {
+ const userinfo = verifyAccessToken(event);
+ if (!userinfo) {
+ return unAuthorizedResponse(event);
+ }
+
+ const codes =
+ MOCK_CODES.find((item) => item.username === userinfo.username)?.codes ?? [];
+
+ return useResponseSuccess(codes);
+});
diff --git a/web/apps/backend-mock/api/auth/login.post.ts b/web/apps/backend-mock/api/auth/login.post.ts
new file mode 100644
index 0000000..df5737a
--- /dev/null
+++ b/web/apps/backend-mock/api/auth/login.post.ts
@@ -0,0 +1,36 @@
+import {
+ clearRefreshTokenCookie,
+ setRefreshTokenCookie,
+} from '~/utils/cookie-utils';
+import { generateAccessToken, generateRefreshToken } from '~/utils/jwt-utils';
+import { forbiddenResponse } from '~/utils/response';
+
+export default defineEventHandler(async (event) => {
+ const { password, username } = await readBody(event);
+ if (!password || !username) {
+ setResponseStatus(event, 400);
+ return useResponseError(
+ 'BadRequestException',
+ 'Username and password are required',
+ );
+ }
+
+ const findUser = MOCK_USERS.find(
+ (item) => item.username === username && item.password === password,
+ );
+
+ if (!findUser) {
+ clearRefreshTokenCookie(event);
+ return forbiddenResponse(event, 'Username or password is incorrect.');
+ }
+
+ const accessToken = generateAccessToken(findUser);
+ const refreshToken = generateRefreshToken(findUser);
+
+ setRefreshTokenCookie(event, refreshToken);
+
+ return useResponseSuccess({
+ ...findUser,
+ accessToken,
+ });
+});
diff --git a/web/apps/backend-mock/api/auth/logout.post.ts b/web/apps/backend-mock/api/auth/logout.post.ts
new file mode 100644
index 0000000..ac6afe9
--- /dev/null
+++ b/web/apps/backend-mock/api/auth/logout.post.ts
@@ -0,0 +1,15 @@
+import {
+ clearRefreshTokenCookie,
+ getRefreshTokenFromCookie,
+} from '~/utils/cookie-utils';
+
+export default defineEventHandler(async (event) => {
+ const refreshToken = getRefreshTokenFromCookie(event);
+ if (!refreshToken) {
+ return useResponseSuccess('');
+ }
+
+ clearRefreshTokenCookie(event);
+
+ return useResponseSuccess('');
+});
diff --git a/web/apps/backend-mock/api/auth/refresh.post.ts b/web/apps/backend-mock/api/auth/refresh.post.ts
new file mode 100644
index 0000000..7df4d34
--- /dev/null
+++ b/web/apps/backend-mock/api/auth/refresh.post.ts
@@ -0,0 +1,33 @@
+import {
+ clearRefreshTokenCookie,
+ getRefreshTokenFromCookie,
+ setRefreshTokenCookie,
+} from '~/utils/cookie-utils';
+import { verifyRefreshToken } from '~/utils/jwt-utils';
+import { forbiddenResponse } from '~/utils/response';
+
+export default defineEventHandler(async (event) => {
+ const refreshToken = getRefreshTokenFromCookie(event);
+ if (!refreshToken) {
+ return forbiddenResponse(event);
+ }
+
+ clearRefreshTokenCookie(event);
+
+ const userinfo = verifyRefreshToken(refreshToken);
+ if (!userinfo) {
+ return forbiddenResponse(event);
+ }
+
+ const findUser = MOCK_USERS.find(
+ (item) => item.username === userinfo.username,
+ );
+ if (!findUser) {
+ return forbiddenResponse(event);
+ }
+ const accessToken = generateAccessToken(findUser);
+
+ setRefreshTokenCookie(event, refreshToken);
+
+ return accessToken;
+});
diff --git a/web/apps/backend-mock/api/demo/bigint.ts b/web/apps/backend-mock/api/demo/bigint.ts
new file mode 100644
index 0000000..880cc5e
--- /dev/null
+++ b/web/apps/backend-mock/api/demo/bigint.ts
@@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+ const userinfo = verifyAccessToken(event);
+ if (!userinfo) {
+ return unAuthorizedResponse(event);
+ }
+ const data = `
+ {
+ "code": 0,
+ "message": "success",
+ "data": [
+ {
+ "id": 123456789012345678901234567890123456789012345678901234567890,
+ "name": "John Doe",
+ "age": 30,
+ "email": "john-doe@demo.com"
+ },
+ {
+ "id": 987654321098765432109876543210987654321098765432109876543210,
+ "name": "Jane Smith",
+ "age": 25,
+ "email": "jane@demo.com"
+ }
+ ]
+ }
+ `;
+ setHeader(event, 'Content-Type', 'application/json');
+ return data;
+});
diff --git a/web/apps/backend-mock/api/menu/all.ts b/web/apps/backend-mock/api/menu/all.ts
new file mode 100644
index 0000000..580cee4
--- /dev/null
+++ b/web/apps/backend-mock/api/menu/all.ts
@@ -0,0 +1,13 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
+export default eventHandler(async (event) => {
+ const userinfo = verifyAccessToken(event);
+ if (!userinfo) {
+ return unAuthorizedResponse(event);
+ }
+
+ const menus =
+ MOCK_MENUS.find((item) => item.username === userinfo.username)?.menus ?? [];
+ return useResponseSuccess(menus);
+});
diff --git a/web/apps/backend-mock/api/status.ts b/web/apps/backend-mock/api/status.ts
new file mode 100644
index 0000000..41773e1
--- /dev/null
+++ b/web/apps/backend-mock/api/status.ts
@@ -0,0 +1,5 @@
+export default eventHandler((event) => {
+ const { status } = getQuery(event);
+ setResponseStatus(event, Number(status));
+ return useResponseError(`${status}`);
+});
diff --git a/web/apps/backend-mock/api/system/dept/.post.ts b/web/apps/backend-mock/api/system/dept/.post.ts
new file mode 100644
index 0000000..c529ea1
--- /dev/null
+++ b/web/apps/backend-mock/api/system/dept/.post.ts
@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+ sleep,
+ unAuthorizedResponse,
+ useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+ const userinfo = verifyAccessToken(event);
+ if (!userinfo) {
+ return unAuthorizedResponse(event);
+ }
+ await sleep(600);
+ return useResponseSuccess(null);
+});
diff --git a/web/apps/backend-mock/api/system/dept/[id].delete.ts b/web/apps/backend-mock/api/system/dept/[id].delete.ts
new file mode 100644
index 0000000..e48f051
--- /dev/null
+++ b/web/apps/backend-mock/api/system/dept/[id].delete.ts
@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+ sleep,
+ unAuthorizedResponse,
+ useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+ const userinfo = verifyAccessToken(event);
+ if (!userinfo) {
+ return unAuthorizedResponse(event);
+ }
+ await sleep(1000);
+ return useResponseSuccess(null);
+});
diff --git a/web/apps/backend-mock/api/system/dept/[id].put.ts b/web/apps/backend-mock/api/system/dept/[id].put.ts
new file mode 100644
index 0000000..aa55c08
--- /dev/null
+++ b/web/apps/backend-mock/api/system/dept/[id].put.ts
@@ -0,0 +1,15 @@
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+ sleep,
+ unAuthorizedResponse,
+ useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+ const userinfo = verifyAccessToken(event);
+ if (!userinfo) {
+ return unAuthorizedResponse(event);
+ }
+ await sleep(2000);
+ return useResponseSuccess(null);
+});
diff --git a/web/apps/backend-mock/api/system/dept/list.ts b/web/apps/backend-mock/api/system/dept/list.ts
new file mode 100644
index 0000000..ae819b6
--- /dev/null
+++ b/web/apps/backend-mock/api/system/dept/list.ts
@@ -0,0 +1,61 @@
+import { faker } from '@faker-js/faker';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+ timeZone: 'Asia/Shanghai',
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+});
+
+function generateMockDataList(count: number) {
+ const dataList = [];
+
+ for (let i = 0; i < count; i++) {
+ const dataItem: RecordContributors
+ +
+
+ 
diff --git a/web/docs/src/commercial/customized.md b/web/docs/src/commercial/customized.md
new file mode 100644
index 0000000..1f0bcec
--- /dev/null
+++ b/web/docs/src/commercial/customized.md
@@ -0,0 +1,12 @@
+# 定制开发
+
+我们提供基于 Vben Admin 的技术支持服务及定制开发，基本需求我们都可以满足。
+
+详细需求可添加作者了解，并注明来意：
+
+- 通过邮箱联系开发者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
+- 通过微信联系开发者：
+
+
+
+我们会在第一时间回复您，定制费用根据需求而定。
diff --git a/web/docs/src/commercial/technical-support.md b/web/docs/src/commercial/technical-support.md
new file mode 100644
index 0000000..ded9bf2
--- /dev/null
+++ b/web/docs/src/commercial/technical-support.md
@@ -0,0 +1,8 @@
+# 技术支持
+
+## 问题反馈
+
+在使用项目的过程中，如果遇到问题，你可以先详细阅读本文档，未找到解决方案时，可以通过以下方式获取技术支持：
+
+- 通过 [GitHub Issues](https://github.com/vbenjs/vue-vben-admin/issues)
+- 通过 [GitHub Discussions](https://github.com/vbenjs/vue-vben-admin/discussions)
diff --git a/web/docs/src/components/common-ui/vben-alert.md b/web/docs/src/components/common-ui/vben-alert.md
new file mode 100644
index 0000000..6541b66
--- /dev/null
+++ b/web/docs/src/components/common-ui/vben-alert.md
@@ -0,0 +1,166 @@
+---
+outline: deep
+---
+
+# Vben Alert 轻量提示框
+
+框架提供的一些用于轻量提示的弹窗，仅使用js代码即可快速动态创建提示而不需要在template写任何代码。
+
+::: info 应用场景
+
+Alert提供的功能与Modal类似，但只适用于简单应用场景。例如临时性、动态地弹出模态确认框、输入框等。如果对弹窗有更复杂的需求，请使用VbenModal
+
+:::
+
+::: tip 注意
+
+Alert提供的快捷方法alert、confirm、prompt动态创建的弹窗在已打开的情况下，不支持HMR（热更新），代码变更后需要关闭这些弹窗后重新打开。
+
+:::
+
+::: tip README
+
+下方示例代码中的，存在一些主题色未适配、样式缺失的问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
+
+:::
+
+## 基础用法
+
+使用 `alert` 创建只有一个确认按钮的提示框。
+
+hello world
+This should be red
+ + + +``` + +For more usage, see the [CSS Modules official documentation](https://vuejs.org/api/sfc-css-features.html#css-modules). diff --git a/web/docs/src/en/guide/in-depth/access.md b/web/docs/src/en/guide/in-depth/access.md new file mode 100644 index 0000000..545ddda --- /dev/null +++ b/web/docs/src/en/guide/in-depth/access.md @@ -0,0 +1,356 @@ +--- +outline: deep +--- + +# Access Control + +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 +- Mixed mode: Using both frontend and backend access control simultaneously + +## Frontend Access Control + +**Implementation Principle**: The permissions for routes are hardcoded on the frontend, specifying which permissions are required to view certain routes. Only general routes are initialized, and routes that require permissions are not added to the route table. After logging in or obtaining user roles through other means, the roles are used to traverse the route table to generate a route table that the role can access. This table is then added to the router instance using `router.addRoute`, achieving permission filtering. + +**Disadvantage**: The permissions are relatively inflexible; if the backend changes roles, the frontend needs to be adjusted accordingly. This is suitable for systems with relatively fixed roles. + +### Steps + +- Ensure the current mode is set to frontend access control + +Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='frontend'`. + +```ts +import { defineOverridesPreferences } from '@vben/preferences'; + +export const overridesPreferences = defineOverridesPreferences({ + // overrides + app: { + // Default value, optional + accessMode: 'frontend', + }, +}); +``` + +- Configure route permissions + +#### If not configured, it is visible by default + +```ts {3} + { + meta: { + authority: ['super'], + }, +}, +``` + +- Ensure the roles returned by the interface match the permissions in the route table + +You can look under `src/store/auth` in the application to find the following code: + +```ts +// Set the login user information, ensuring that userInfo.roles is an array and contains permissions from the route table +// For example: userInfo.roles=['super', 'admin'] +authStore.setUserInfo(userInfo); +``` + +At this point, the configuration is complete. You need to ensure that the roles returned by the interface after login match the permissions in the route table; otherwise, access will not be possible. + +### Menu Visible but Access Forbidden + +Sometimes, we need the menu to be visible but access to it forbidden. This can be achieved by setting `menuVisibleWithForbidden` to `true`. In this case, the menu will be visible, but access will be forbidden, redirecting to a 403 page. + +```ts +{ + meta: { + menuVisibleWithForbidden: true, + }, +}, +``` + +## Backend Access Control + +**Implementation Principle**: It is achieved by dynamically generating a routing table through an API, which returns data following a certain structure. The frontend processes this data into a recognizable structure, then adds it to the routing instance using `router.addRoute`, realizing the dynamic generation of permissions. + +**Disadvantage**: The backend needs to provide a data structure that meets the standards, and the frontend needs to process this structure. This is suitable for systems with more complex permissions. + +### Steps + +- Ensure the current mode is set to backend access control + +Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='backend'`. + +```ts +import { defineOverridesPreferences } from '@vben/preferences'; + +export const overridesPreferences = defineOverridesPreferences({ + // overrides + app: { + accessMode: 'backend', + }, +}); +``` + +- Ensure the structure of the menu data returned by the interface is correct + +You can look under `src/router/access.ts` in the application to find the following code: + +```ts +async function generateAccess(options: GenerateMenuAndRoutesOptions) { + return await generateAccessible(preferences.app.accessMode, { + fetchMenuListAsync: async () => { + // This interface is for the menu data returned by the backend + return await getAllMenus(); + }, + }); +} +``` + +- Interface returns menu data, see comments for explanation + +::: details Example of Interface Returning Menu Data + +```ts +const dashboardMenus = [ + { + // Here, 'BasicLayout' is hardcoded and cannot be changed + component: 'BasicLayout', + meta: { + order: -1, + title: 'page.dashboard.title', + }, + name: 'Dashboard', + path: '/', + redirect: '/analytics', + children: [ + { + name: 'Analytics', + path: '/analytics', + // Here is the path of the page, need to remove 'views/' and '.vue' + component: '/dashboard/analytics/index', + meta: { + affixTab: true, + title: 'page.dashboard.analytics', + }, + }, + { + name: 'Workspace', + path: '/workspace', + component: '/dashboard/workspace/index', + meta: { + title: 'page.dashboard.workspace', + }, + }, + ], + }, +]; +``` + +::: + +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**: Mixed mode combines both frontend access control and backend access control methods. The system processes frontend fixed route permissions and backend dynamic menu data in parallel, ultimately merging both parts of routes to provide a more flexible access control solution. + +**Advantages**: Combines the performance advantages of frontend control with the flexibility of backend control, suitable for complex business scenarios requiring permission management. + +### 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 the route permission configuration method in [Frontend Access Control](#frontend-access-control) mode. + +- Configure backend menu interface + +Same as the interface configuration method in [Backend Access Control](#backend-access-control) mode. + +- Ensure roles and permissions match + +Must satisfy both frontend route permission configuration and backend menu data return requirements, ensuring user roles match the permission configurations of both modes. + +At this point, the configuration is complete. Mixed mode will automatically merge frontend and backend routes, providing complete access control functionality. + +## 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. + +### Permission Code + +The permission code is the code returned by the interface. The logic to determine whether a button is displayed is located under `src/store/auth`: + +```ts +const [fetchUserInfoResult, accessCodes] = await Promise.all([ + fetchUserInfo(), + getAccessCodes(), +]); + +userInfo = fetchUserInfoResult; +authStore.setUserInfo(userInfo); +accessStore.setAccessCodes(accessCodes); +``` + +Locate the `getAccessCodes` corresponding interface, which can be adjusted according to business logic. + +The data structure returned by the permission code is an array of strings, for example: `['AC_100100', 'AC_100110', 'AC_100120', 'AC_100010']` + +With the permission codes, you can use the `AccessControl` component and API provided by `@vben/access` to show and hide buttons. + +#### Component Method + +```vue + + + + +