feat: permission

Author: wkylin

README.md

@@ -399,6 +399,54 @@ http://localhost:8080/auth/callback
 
 ## Sentry 接入
 
+## **更新摘要（近期权限与请求模块改进）**
+
+以下为最近在仓库中完成的主要改动与改进，便于团队成员快速了解变更并在本地验证：
+
+- **权限与导航**
+   - 统一并强化了权限检查逻辑，`permissionService` 提供缓存、过期策略、强制刷新与单例获取，避免重复请求和竞态。
+   - 在侧边栏 `src/pages/layout/proSecNav/index.jsx` 引入了基于权限的菜单过滤，确保首页 `/` 对所有账号可见，并避免在无权限时强制跳转或刷新。
+   - 引入“安全导航”封装（`useSafeNavigate` / `SafeLink` 等），在点击或程序化导航前检查权限，阻止越权访问并提供友好提示。
+
+- **请求层重构**
+   - 全新增强 `src/service/request.js`：基于 `axios`，支持全局配置、可取消请求（AbortController）、上传/下载进度回调、并发/串行执行控制、重试机制以及每次请求可关闭错误弹窗（`config.showError = false`）。
+   - 新的请求模块向后兼容常见用法，同时提供 `request.parallel` / `request.series` / `request.retry` 等工具函数，便于批量请求与限流。
+   - 为请求错误提示增加了统一处理，并与消息中心集成（消息去重，见下）。
+
+- **消息去重**
+   - 修改了 `src/utils/message.ts`：对短时间（2s 窗口）内相同文本的消息进行去重，避免网络抖动或多处错误导致的重复弹窗。
+
+- **文档与示例**
+   - 新增 `docs/REQUESTS.md`，包含对新版 `request` 模块的使用示例：并发、串行、取消、上传/下载进度、重试、关闭错误提示等场景，用法清晰易懂，建议开发者参考并在新代码中使用。
+
+- **自动化测试与迁移提示**
+   - 已配合 Playwright 增加部分 E2E 用例（授权/未授权场景），建议在变更请求或权限逻辑后运行 `npm run test:e2e` 以回归验证。
+
+如何验证本地改动（简要）
+
+- 先安装依赖并构建：
+
+```bash
+npm install
+npm run build:production
+```
+
+- 本地调试：启动 dev 或 mock server：
+
+```bash
+npm start
+# 或使用 faker mock
+npm run dev:faker
+```
+
+- 运行 E2E（如已配置 Playwright）：
+
+```bash
+npm run test:e2e
+```
+
+如需我把项目中仍存在的直接重复请求点（例如多个组件在 mount 时各自向后端请求权限）替换为 `permissionService.getPermissions()` 的单点调用，我可以扫描并提供自动补丁或直接提交变更，请告知偏好工作方式。
+
 1. [Sentry](https://sentry.io/)
 2. 遇到的问题：
    - ERROR in Sentry CLI Plugin: spawn /Users/sheldon/Desktop/promotion-manage-web/node_modules/@sentry/cli/sentry-cli ENOENT

docs/REQUESTS.md

@@ -0,0 +1,148 @@
+**请求模块 使用说明**
+
+位置: `src/service/request.js`
+
+简介
+- 本文档说明如何使用仓库中增强过的 `request` 模块。该模块基于 `axios`，提供：可取消请求、并发/串行执行、重试机制、上传/下载进度回调、每次请求可开关错误弹窗及全局配置接口。
+
+导入
+
+```js
+import request from '@/service/request'
+```
+
+1) 全局配置
+
+- 设置 baseURL:
+
+```js
+request.setBaseURL('https://api.example.com')
+```
+
+- 设置全局默认 headers:
+
+```js
+request.setDefaultHeaders({ 'X-Trace-Id': 'abc123' })
+```
+
+2) 基本请求（返回 Promise，同时附带 `.cancel()`）
+
+```js
+// GET
+const p = request.get('/api/users', { page: 1 })
+p.then(res => console.log(res)).catch(err => console.error(err))
+
+// 取消请求
+p.cancel()
+
+// POST
+request.post('/api/user', { name: 'alice' })
+  .then(res => console.log(res))
+  .catch(err => console.error(err))
+
+// 禁用该次请求的错误弹窗
+request.get('/api/maybe-missing', {}, { showError: false })
+```
+
+注意：当后端采用 `{ code, data, message }` 约定时，模块会在 `code === 0` 视作成功并返回后端对象；否则会按 `message` 展示错误（可用 `showError:false` 关闭）。如果后端返回不是该结构，则直接返回原始数据。
+
+3) 上传与下载（支持进度回调）
+
+```js
+// 上传
+const fd = new FormData()
+fd.append('file', fileInput.files[0])
+request.upload('/api/upload', fd, {
+  onUploadProgress: (e) => {
+    const pct = Math.round((e.loaded / e.total) * 100)
+    console.log('上传进度', pct)
+  },
+}).then(res => console.log('上传完成', res))
+
+// 下载（会触发浏览器下载）
+request.download('/api/export', { q: 'all' }, 'report.xlsx', {
+  onDownloadProgress: (e) => {
+    const pct = Math.round((e.loaded / e.total) * 100)
+    console.log('下载进度', pct)
+  }
+}).then(() => console.log('下载结束'))
+```
+
+4) 并行 / 并发控制
+
+```js
+// 简单并行：传入请求描述数组，返回 Promise 数组结果
+// 描述可以是：函数、axios config 对象，或 [method, url, body, config]
+const results = await request.parallel([
+  ['get', '/api/a'],
+  ['post', '/api/b', { x: 1 }],
+  () => request.get('/api/c')
+], /* concurrency */ 3)
+
+console.log(results)
+```
+
+5) 串行
+
+```js
+// 依次执行
+const seriesResults = await request.series([
+  () => request.get('/api/step1'),
+  ['post', '/api/step2', { id: 123 }],
+])
+```
+
+6) 可取消的自定义请求
+
+```js
+const promise = request.request({ method: 'get', url: '/api/long', params: { t: 1 } })
+// 取消
+promise.cancel()
+```
+
+7) 重试（对任意返回 Promise 的函数）
+
+```js
+await request.retry(() => request.get('/api/maybe-flaky'), 3, 1000)
+```
+
+8) 访问底层 axios（高级用法）
+
+```js
+const ax = request.axios()
+ax.get('/raw/endpoint').then(r => console.log(r))
+```
+
+9) 常见使用场景示例
+- 场景 A：页面 mount 时保护性加载权限数据，避免重复请求
+
+```js
+// 使用 permissionService（单例）来避免多个组件重复向后端请求权限
+import permissionService from '@/service/permissionService'
+// 在 App 初始化处调用一次
+permissionService.getPermissions()
+```
+
+- 场景 B：文件导出，提供进度与取消
+
+```js
+const downloadPromise = request.download('/api/export', {}, 'report.xlsx', {
+  onDownloadProgress: (e) => console.log('progress', e.loaded)
+})
+// 在需要时取消
+// downloadPromise.cancel()
+```
+
+- 场景 C：批量请求但限制并发（防止后端压力）
+
+```js
+const tasks = urls.map((u) => ['get', u])
+const results = await request.parallel(tasks, 4)
+```
+
+备注
+- 默认超时时间与 baseURL 可通过 `request.setBaseURL` 与 `request.setDefaultHeaders` 调整。
+- 单次请求关闭弹窗：传 `config.showError = false`。
+- 所有请求返回的 Promise 都包含 `.cancel()`（内部使用 AbortController）。
+
+如需我把示例中的某些场景自动替换到代码中（例如把多个直接调用 `permissionAPI.getUserPermissions()` 的位置替换为 `permissionService.getPermissions()`），我可以继续扫描并提交补丁。

src/mock/permission.ts

@@ -216,35 +216,116 @@ export const mockUserPermissions: Record<string, UserPermission> = {
     permissions: ['*:*'],
     routes: adminRoutes,
   },
-  admin: {
-    userId: '2',
-    username: '管理员',
-    roles: [mockRoles[1]],
-    permissions: [
-      'home:read',
-      'user:read',
-      'user:create',
-      'user:update',
-      'dashboard:read',
-      'business:read',
-      'coupons:read',
-    ],
-    routes: managerRoutes,
-  },
-  business_user: {
-    userId: '3',
-    username: '业务员',
-    roles: [mockRoles[2]],
-    permissions: ['home:read', 'business:*', 'coupons:read', 'coupons:create', 'dashboard:read'],
-    routes: businessRoutes,
-  },
-  user: {
-    userId: '4',
-    username: '普通用户',
-    roles: [mockRoles[3]],
-    permissions: ['home:read', 'dashboard:read'],
-    routes: userRoutes,
-  },
+  admin: ((): UserPermission => {
+    // 为管理员根据 routes 自动收集 permissions
+    const base = ['home:read', 'user:read', 'user:create', 'user:update', 'dashboard:read']
+    const perms = new Set<string>(base)
+    const collect = (routes: string[]) => {
+      routes.forEach((r) => {
+        let p = routePermissionMap[r]
+        if (!p) {
+          // 尝试向上匹配父路径或带参数的模式
+          let temp = r
+          while (temp && temp !== '/') {
+            const candidateParam = `${temp}/:id`
+            if (routePermissionMap[candidateParam]) {
+              p = routePermissionMap[candidateParam]
+              break
+            }
+            const idx = temp.lastIndexOf('/')
+            if (idx <= 0) break
+            temp = temp.substring(0, idx)
+            if (routePermissionMap[temp]) {
+              p = routePermissionMap[temp]
+              break
+            }
+          }
+        }
+        if (!p && routePermissionMap['*']) p = routePermissionMap['*']
+        if (p) perms.add(p)
+      })
+    }
+    collect(managerRoutes)
+    return {
+      userId: '2',
+      username: '管理员',
+      roles: [mockRoles[1]],
+      permissions: Array.from(perms) as PermissionCode[],
+      routes: managerRoutes,
+    }
+  })(),
+  business_user: ((): UserPermission => {
+    const base = ['home:read', 'business:*', 'coupons:read', 'coupons:create', 'dashboard:read']
+    const perms = new Set<string>(base)
+    const collect = (routes: string[]) => {
+      routes.forEach((r) => {
+        let p = routePermissionMap[r]
+        if (!p) {
+          let temp = r
+          while (temp && temp !== '/') {
+            const candidateParam = `${temp}/:id`
+            if (routePermissionMap[candidateParam]) {
+              p = routePermissionMap[candidateParam]
+              break
+            }
+            const idx = temp.lastIndexOf('/')
+            if (idx <= 0) break
+            temp = temp.substring(0, idx)
+            if (routePermissionMap[temp]) {
+              p = routePermissionMap[temp]
+              break
+            }
+          }
+        }
+        if (!p && routePermissionMap['*']) p = routePermissionMap['*']
+        if (p) perms.add(p)
+      })
+    }
+    collect(businessRoutes)
+    return {
+      userId: '3',
+      username: '业务员',
+      roles: [mockRoles[2]],
+      permissions: Array.from(perms) as PermissionCode[],
+      routes: businessRoutes,
+    }
+  })(),
+  user: ((): UserPermission => {
+    const base = ['home:read', 'dashboard:read']
+    const perms = new Set<string>(base)
+    const collect = (routes: string[]) => {
+      routes.forEach((r) => {
+        let p = routePermissionMap[r]
+        if (!p) {
+          let temp = r
+          while (temp && temp !== '/') {
+            const candidateParam = `${temp}/:id`
+            if (routePermissionMap[candidateParam]) {
+              p = routePermissionMap[candidateParam]
+              break
+            }
+            const idx = temp.lastIndexOf('/')
+            if (idx <= 0) break
+            temp = temp.substring(0, idx)
+            if (routePermissionMap[temp]) {
+              p = routePermissionMap[temp]
+              break
+            }
+          }
+        }
+        if (!p && routePermissionMap['*']) p = routePermissionMap['*']
+        if (p) perms.add(p)
+      })
+    }
+    collect(userRoutes)
+    return {
+      userId: '4',
+      username: '普通用户',
+      roles: [mockRoles[3]],
+      permissions: Array.from(perms) as PermissionCode[],
+      routes: userRoutes,
+    }
+  })(),
 }
 
 /**

src/pages/layout/proSecNav/index.module.less

@@ -20,6 +20,9 @@
 .menu :global(.ant-menu-inline .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title) {
   padding-left: 36px !important;
 }
-.menu :global(.ant-menu-inline .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title) {
+.menu
+  :global(
+    .ant-menu-inline .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title
+  ) {
   padding-left: 44px !important;
 }