feat: 移除mock并接入真实权限控制

This commit is contained in:
湛兮
2026-05-26 16:24:03 +08:00
parent 5003628017
commit 304589bf8b
30 changed files with 965 additions and 1037 deletions
+11 -10
View File
@@ -51,7 +51,6 @@ http://localhost:8848/
├── .husky/ # Git hooks,提交前执行 lint-staged,提交信息走 commitlint
├── .vscode/ # VS Code 推荐配置与 Vue 代码片段
├── build/ # Vite 插件、CDN、压缩、构建信息与工具函数
├── mock/ # pure-admin 模板保留的 mock 登录/路由数据
├── public/ # 静态资源与运行时平台配置
├── src/ # 前端源码
│ ├── api/ # HTTP API 封装,业务接口集中在 access.ts
@@ -65,7 +64,7 @@ http://localhost:8848/
│ ├── store/ # Pinia store,含用户、权限、标签页、主题等模块
│ ├── style/ # 全局样式、主题、暗色模式、侧边栏和过渡样式
│ ├── utils/ # 鉴权、HTTP、缓存、消息、进度条、树处理等工具
│ └── views/ # 页面视图,当前业务页在 employees、roles、stores
│ └── views/ # 页面视图,当前业务页在 employees、roles、stores、permissions
├── types/ # 全局类型声明、组件声明、路由声明和 Vue shim
├── AGENTS.md # Codex/Agent 入口规则,转到 RTK.md
├── RTK.md # 本仓库协作规则与 README 同步要求
@@ -91,7 +90,7 @@ http://localhost:8848/
| `pnpm preview:build` | 先构建再预览 | 一步完成打包验收 |
| `pnpm typecheck` | 执行 `tsc --noEmit``vue-tsc --noEmit --skipLibCheck` | 类型检查 |
| `pnpm lint` | 依次执行 ESLint、Prettier、Stylelint 自动修复 | 提交前整理代码 |
| `pnpm lint:eslint` | 对 `src``mock``build` 下 JS/TS/Vue 做 ESLint 修复 | 脚本或逻辑代码调整后 |
| `pnpm lint:eslint` | 对 `src``build` 下 JS/TS/Vue 做 ESLint 修复 | 脚本或逻辑代码调整后 |
| `pnpm lint:prettier` | 格式化 `src` 下常见源码与文档格式 | 样式统一 |
| `pnpm lint:stylelint` | 修复 HTML/Vue/CSS/SCSS 样式规则 | 样式文件调整后 |
| `pnpm svgo` | 递归压缩 SVG | SVG 资源变更后 |
@@ -102,9 +101,10 @@ http://localhost:8848/
- `src/views/stores/index.vue`: 门店管理,筛选、重置、启停、删除后都会重新调用接口,支持新增和编辑。
- `src/views/roles/index.vue`: 角色管理,搜索、重置、删除和保存后都会重新调用接口,支持角色编码校验。
- `src/views/employees/index.vue`: 员工管理,门店/状态/关键词筛选、重置、分页、启停、删除和保存后都会重新调用接口。
- `src/api/access.ts`: 门店、角色、员工接口类型与 HTTP 方法封装
- `src/api/user.ts`: 登录、当前用户、当前权限菜单接口封装。
- `src/router/modules/employees.ts`: 权限管理菜单入口,挂载门店、角色、员工三个页面
- `src/views/permissions/index.vue`: 权限策略,支持查看角色权限、按角色勾选权限点并保存到后端
- `src/api/access.ts`: 门店、角色、员工、权限策略和角色权限分配接口类型与 HTTP 方法封装。
- `src/api/user.ts`: 登录、当前用户和当前权限菜单接口封装
- `src/router/modules/employees.ts`: 权限管理菜单入口,挂载门店、角色、员工、权限策略四个页面。
- `src/store/modules/user.ts`: 保存 JWT 登录态、当前用户、权限码和后端菜单动作权限。
## 后端对接
@@ -119,12 +119,13 @@ http://localhost:8848/
- `POST /api/auth/admin/login`
- `GET /api/auth/me`
- `GET /api/permissions/me`
- `GET /api/stores`,管理列表会携带 `includeInactive`,搜索/重置会重新请求接口后按当前条件收敛结果
- `GET /api/permissions/policies`
- `GET /api/stores`,门店管理列表会携带 `page``pageSize`,筛选时会携带 `status``keyword`
- `GET /api/stores/:id`
- `POST /api/stores`
- `PATCH /api/stores/:id`
- `DELETE /api/stores/:id`
- `GET /api/roles`搜索/重置会重新请求接口后按关键词收敛结果
- `GET /api/roles`角色管理列表会携带 `page``pageSize`,筛选时会携带 `keyword``isSystem`
- `GET /api/roles/:id`
- `POST /api/roles`
- `PATCH /api/roles/:id`
@@ -136,7 +137,7 @@ http://localhost:8848/
- `PATCH /api/employees/:id/status`
- `DELETE /api/employees/:id`
接口响应统一在 `src/api/access.ts` 中使用 `ApiResult<T>``PaginatedData<T>` 描述,页面层只消费 `result.data`,避免在视图里重复拼接接口路径。列表搜索、重置、分页和状态变更后的刷新都应通过接口层完成,不直接依赖页面内存里的旧列表。
接口响应统一在 `src/api/access.ts` 中使用 `ApiResult<T>``PaginatedData<T>` 描述,页面层只消费 `result.data`,避免在视图里重复拼接接口路径。门店、角色、员工列表搜索、重置、分页和状态变更后的刷新都应通过接口层完成,不直接依赖页面内存里的旧列表。
## 登录与鉴权流程
@@ -144,7 +145,7 @@ http://localhost:8848/
2. 前端保存后端返回的 `data.token`,并按 `expiresIn` 换算本地过期时间。
3. 登录成功后立即调用 `GET /api/auth/me` 校验当前账号,再调用 `GET /api/permissions/me` 获取权限码、菜单和动作权限。
4. 路由守卫会在刷新页面后重新拉取当前用户和权限,未登录或 token 过期会跳回 `/login`
5. 菜单按路由 `meta.permission` 与后端权限码过滤,按钮按 `store:manage``role:manage``employee:manage` 等权限码显隐。
5. 菜单按路由 `meta.menuKey``meta.permission``/api/permissions/me` 返回的后端菜单过滤;按钮按后端菜单 `actions` 控制新增、编辑、启停和删除显隐。
6. 后端当前没有 refresh-token 接口,收到 `401` 或本地 token 过期时直接清理登录态并要求重新登录。
## 配置说明