chore: check off Task 8 (frontend infrastructure)

This commit is contained in:
2026-07-02 12:01:29 +08:00
parent 14d81045e6
commit a84a0ed153
2 changed files with 12 additions and 12 deletions

View File

@@ -1574,7 +1574,7 @@ git commit -m "feat(rbac): add @RequirePermission decorators to all business con
**Interfaces:**
- Produces: `usePermission()` hook, `PermissionButton` 组件, `PermissionRoute` 组件
- [ ] **Step 1: 创建 usePermission hook**
- [x] **Step 1: 创建 usePermission hook**
```typescript
// frontend/src/hooks/usePermission.ts
@@ -1601,7 +1601,7 @@ export function usePermission() {
}
```
- [ ] **Step 2: 创建 PermissionButton 组件**
- [x] **Step 2: 创建 PermissionButton 组件**
```typescript
// frontend/src/components/PermissionButton.tsx
@@ -1623,7 +1623,7 @@ const PermissionButton: React.FC<PermissionButtonProps> = ({ permission, childre
export default PermissionButton;
```
- [ ] **Step 3: 创建 PermissionRoute 组件**
- [x] **Step 3: 创建 PermissionRoute 组件**
```typescript
// frontend/src/components/PermissionRoute.tsx
@@ -1653,7 +1653,7 @@ const PermissionRoute: React.FC<PermissionRouteProps> = ({ permission, children
export default PermissionRoute;
```
- [ ] **Step 4: 修改 Login 页面存储 permissions**
- [x] **Step 4: 修改 Login 页面存储 permissions**
`frontend/src/pages/Login/index.tsx``onFinish` 方法中,登录成功后存储 permissions
@@ -1689,7 +1689,7 @@ const onFinish = async (values: any) => {
// 但此处先在 Login 页确保权限被正确存储
```
- [ ] **Step 5: 修改 axios 拦截器处理 403**
- [x] **Step 5: 修改 axios 拦截器处理 403**
`frontend/src/api/index.ts` 中,在 401 处理逻辑之后增加 403 处理:
@@ -1717,7 +1717,7 @@ api.interceptors.response.use(
**注意**:此处 403 提示需在各页面调用 api 时由 catch 块处理显示 message。具体在 Task 10 中各页面的 api 调用 catch 块中增加 403 判断。
- [ ] **Step 6: 编译验证**
- [x] **Step 6: 编译验证**
```bash
cd frontend && npx tsc -b --noEmit
@@ -1725,7 +1725,7 @@ cd frontend && npx tsc -b --noEmit
预期:无类型错误(可能需要处理 React 19 + Ant Design 6 的类型兼容问题,如有则忽略第三方类型错误)。
- [ ] **Step 7: Commit**
- [x] **Step 7: Commit**
```bash
git add frontend/src/hooks/ frontend/src/components/PermissionButton.tsx frontend/src/components/PermissionRoute.tsx frontend/src/pages/Login/ frontend/src/api/

View File

@@ -40,11 +40,11 @@
## 5. 前端权限基础设施
- [ ] 5.1 创建 usePermission hook提供 hasPermission/hasAnyPermission/hasAllPermissions 方法,从登录时存储的 permission 列表判断
- [ ] 5.2 创建 PermissionButton 组件:根据 permission 属性控制 disabled/隐藏,替代各页面的内联权限判断
- [ ] 5.3 创建 PermissionRoute 组件:无权限时渲染 403 页面或重定向
- [ ] 5.4 更新 Login 页面:登录成功后存储 permissions 数组到 localStorage
- [ ] 5.5 更新 api/index.tsaxios 拦截器处理 403 响应(区别于 401 的处理)
- [x] 5.1 创建 usePermission hook提供 hasPermission/hasAnyPermission/hasAllPermissions 方法,从登录时存储的 permission 列表判断
- [x] 5.2 创建 PermissionButton 组件:根据 permission 属性控制 disabled/隐藏,替代各页面的内联权限判断
- [x] 5.3 创建 PermissionRoute 组件:无权限时渲染 403 页面或重定向
- [x] 5.4 更新 Login 页面:登录成功后存储 permissions 数组到 localStorage
- [x] 5.5 更新 api/index.tsaxios 拦截器处理 403 响应(区别于 401 的处理)
## 6. 前端角色管理页面