hive-manage-v3/docs/superpowers/plans/phase-1.5-frontend-spec.md

在 /home/enzo/projects/hive-manage-v3/frontend/ 下实现前端鉴权体系。

1. API 客户端

创建 frontend/src/api/client.ts:

• axios 实例 baseURL='/api/v1'
• 请求拦截器: 从 localStorage('access_token') 读取 JWT, 加到 Authorization: Bearer header
• 响应拦截器: 401 自动清除 token → 跳转 /login

创建 frontend/src/api/auth.ts:

import client from './client'
export const login = (username: string, password: string) => client.post('/auth/login', {username, password})
export const register = (data: {username, email, password}) => client.post('/auth/register', data)
export const refresh = () => client.post('/auth/refresh')
export const changePassword = (data: {old_password, new_password}) => client.post('/auth/change-password', data)

创建 frontend/src/api/users.ts:

import client from './client'
export const getUsers = (params?) => client.get('/users', {params})
export const getUser = (id: string) => client.get(`/users/${id}`)
export const updateUser = (id: string, data) => client.patch(`/users/${id}`, data)
export const approveUser = (id: string) => client.post(`/users/${id}/approve`)

创建 frontend/src/api/audit.ts:

import client from './client'
export const getAuditLogs = (params?) => client.get('/audit', {params})

2. useAuth hook

创建/修改 frontend/src/hooks/useAuth.ts:

import { useState, useEffect, createContext, useContext } from 'react'
// AuthContext 提供: user, token, login(), logout(), isAuthenticated
// token 存 localStorage('access_token')
// user 从 JWT payload 解码获取 (username, role, user_id)

3. Login 页面

修改 frontend/src/pages/LoginPage.tsx:

• 居中卡片, 暗色背景
• Logo "🐝 知微蜂巢" + "Hive Manage v3"
• 用户名 + 密码输入框
• 登入按钮 (primary, full width)
• 注册链接 (跳转注册页)
• 错误提示 (用户名/密码错误, 账户锁定 15 分钟等)
• 成功后跳转 /dashboard

4. 用户管理页面

修改 frontend/src/pages/UserManagementPage.tsx:

• 使用 Table 组件
• 列: 用户名, 邮箱, 角色(下拉可改), 状态(active/inactive), 审批状态, 创建时间, 操作
• 仅 owner 可见操作按钮
• 角色修改: owner 可改, API PATCH /users/{id}
• 审批: owner 可点, API POST /users/{id}/approve
• 分页: 每页 20 条

5. 审计日志页面

修改 frontend/src/pages/AuditLogPage.tsx:

• 使用 Table 组件
• 列: 时间, 用户, 操作(action), 目标(target), 详情(detail), IP
• action 筛选: 下拉列表 (全部/keys.batch_overwrite/gateway.toggle/cron.trigger/...)
• 分页: 每页 20 条
• 仅 owner 可见

6. 路由守卫

修改 App.tsx:

• 未登录: 任何页面 → 重定向 /login
• 登录后: 根据角色隐藏/显示导航项和操作按钮
• Viewer 看不到: 用户管理、审计日志、Gateway 启停、密钥覆盖、Cron 操作

完成后提交:

cd /home/enzo/projects/hive-manage-v3 && git add frontend/src/api/ frontend/src/hooks/useAuth.ts frontend/src/pages/LoginPage.tsx frontend/src/pages/UserManagementPage.tsx frontend/src/pages/AuditLogPage.tsx frontend/src/App.tsx && git commit -m "feat: frontend auth flow (login, user management, audit logs, route guards)"