261 lines
8.4 KiB
Markdown
261 lines
8.4 KiB
Markdown
---
|
||
name: 后端密码访问功能开发
|
||
overview: 为 Vue 3 前端项目添加后端密码访问控制功能，使用 Express + SQLite + JWT 实现用户密码验证和管理员密码管理功能
|
||
design:
|
||
architecture:
|
||
framework: vue
|
||
component: tdesign
|
||
styleKeywords:
|
||
- Glassmorphism
|
||
- Dark Mode
|
||
- Minimalist
|
||
- Gradient Accent
|
||
fontSystem:
|
||
fontFamily: PingFang SC
|
||
heading:
|
||
size: 28px
|
||
weight: 600
|
||
subheading:
|
||
size: 18px
|
||
weight: 500
|
||
body:
|
||
size: 16px
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#6366F1"
|
||
- "#8B5CF6"
|
||
- "#A855F7"
|
||
background:
|
||
- "#0F172A"
|
||
- "#1E293B"
|
||
- "#334155"
|
||
text:
|
||
- "#F8FAFC"
|
||
- "#94A3B8"
|
||
- "#64748B"
|
||
functional:
|
||
- "#10B981"
|
||
- "#EF4444"
|
||
- "#F59E0B"
|
||
todos:
|
||
- id: setup-backend
|
||
content: 创建后端项目结构，安装依赖，初始化 Express 服务和 SQLite 数据库
|
||
status: completed
|
||
- id: implement-auth-api
|
||
content: 实现用户密码验证 API 和管理员登录 API，包含 JWT 生成和 bcrypt 加密
|
||
status: completed
|
||
dependencies:
|
||
- setup-backend
|
||
- id: implement-admin-api
|
||
content: 实现管理员密码管理 API（增删查），添加 JWT 认证中间件
|
||
status: completed
|
||
dependencies:
|
||
- setup-backend
|
||
- id: create-frontend-auth
|
||
content: 创建前端认证工具模块，实现 token 管理和 API 请求封装
|
||
status: completed
|
||
- id: create-login-pages
|
||
content: 创建用户密码输入页和管理员登录页组件，实现登录验证逻辑
|
||
status: completed
|
||
dependencies:
|
||
- create-frontend-auth
|
||
- id: create-admin-panel
|
||
content: 创建管理员密码管理面板，实现密码列表展示、添加和删除功能
|
||
status: completed
|
||
dependencies:
|
||
- create-frontend-auth
|
||
- id: add-route-guard
|
||
content: 修改路由配置，添加全局路由守卫和管理员路由，配置 Vite 代理
|
||
status: completed
|
||
dependencies:
|
||
- create-login-pages
|
||
---
|
||
|
||
## 产品概述
|
||
|
||
为现有的 AI 英语学习平台添加后端密码访问控制功能，实现全站密码保护和管理员密码管理能力。
|
||
|
||
## 核心功能
|
||
|
||
- **全站访问控制**：所有页面必须验证密码才能访问，验证后保持登录状态
|
||
- **用户密码验证**：用户输入访问密码，验证成功后通过 JWT Token 保持登录状态
|
||
- **管理员登录**：独立的管理员登录入口，使用用户名+密码验证
|
||
- **密码管理面板**：管理员可添加新的访问密码（名称+密码）、删除现有密码
|
||
- **数据安全**：SQLite 数据库存储，密码使用 bcrypt 加密，SQL 参数化查询防止注入
|
||
|
||
## 用户确认的配置
|
||
|
||
- 管理员凭据存储在 SQLite 数据库中（可修改）
|
||
- 所有密码都可访问全部页面（仅用于区分不同访问者）
|
||
- 使用 JWT Token 保持登录状态（无状态）
|
||
- 首次访问显示密码输入页，验证后保持登录状态
|
||
|
||
## 技术栈
|
||
|
||
### 后端（新建）
|
||
|
||
- **运行环境**：Node.js
|
||
- **Web 框架**：Express.js
|
||
- **数据库**：SQLite3（better-sqlite3 同步 API）
|
||
- **认证**：JWT（jsonwebtoken）
|
||
- **密码加密**：bcryptjs
|
||
- **安全**：cors、helmet、express-rate-limit
|
||
|
||
### 前端（已有）
|
||
|
||
- **框架**：Vue 3 + Vite
|
||
- **路由**：Vue Router 5
|
||
- **HTTP 客户端**：axios（已安装）
|
||
|
||
## 技术架构
|
||
|
||
### 系统架构
|
||
|
||
```mermaid
|
||
graph TB
|
||
subgraph 前端 Vue3
|
||
A[路由守卫] --> B{Token 有效?}
|
||
B -->|是| C[页面组件]
|
||
B -->|否| D[密码输入页]
|
||
E[管理员入口] --> F[管理员登录页]
|
||
F --> G[密码管理面板]
|
||
end
|
||
|
||
subgraph 后端 Express
|
||
H[API 路由]
|
||
H --> I[认证中间件]
|
||
I --> J[用户密码验证]
|
||
I --> K[管理员认证]
|
||
H --> L[密码 CRUD]
|
||
end
|
||
|
||
subgraph 数据层
|
||
M[(SQLite)]
|
||
M --> N[access_passwords 表]
|
||
M --> O[admin_users 表]
|
||
end
|
||
|
||
D -->|POST /api/auth/verify| J
|
||
F -->|POST /api/admin/login| K
|
||
G -->|GET/POST/DELETE /api/admin/passwords| L
|
||
J -->|返回 JWT| D
|
||
K -->|返回 JWT| F
|
||
L --> M
|
||
```
|
||
|
||
### 数据库设计
|
||
|
||
```sql
|
||
-- 访问密码表
|
||
CREATE TABLE access_passwords (
|
||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||
name TEXT NOT NULL UNIQUE, -- 密码名称标识
|
||
password_hash TEXT NOT NULL, -- bcrypt 加密后的密码
|
||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||
);
|
||
|
||
-- 管理员用户表
|
||
CREATE TABLE admin_users (
|
||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||
username TEXT NOT NULL UNIQUE,
|
||
password_hash TEXT NOT NULL,
|
||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||
);
|
||
```
|
||
|
||
### API 设计
|
||
|
||
| 端点 | 方法 | 描述 | 认证 |
|
||
| --- | --- | --- | --- |
|
||
| `/api/auth/verify` | POST | 用户密码验证 | 无 |
|
||
| `/api/auth/verify-token` | GET | 验证 Token 有效性 | User JWT |
|
||
| `/api/admin/login` | POST | 管理员登录 | 无 |
|
||
| `/api/admin/passwords` | GET | 获取密码列表 | Admin JWT |
|
||
| `/api/admin/passwords` | POST | 添加新密码 | Admin JWT |
|
||
| `/api/admin/passwords/:id` | DELETE | 删除密码 | Admin JWT |
|
||
|
||
|
||
## 实现要点
|
||
|
||
### 安全措施
|
||
|
||
1. **密码存储**：使用 bcryptjs 加密，cost factor = 10
|
||
2. **JWT 配置**：HS256 签名，access token 有效期 7 天
|
||
3. **SQL 注入防护**：使用参数化查询
|
||
4. **速率限制**：登录接口限制 5 次/分钟/IP
|
||
5. **CORS 配置**：仅允许同源请求
|
||
|
||
### 前端路由守卫逻辑
|
||
|
||
```
|
||
用户访问任意页面 → 检查 localStorage 中的 token
|
||
→ 无 token 或无效 → 重定向到密码输入页
|
||
→ token 有效 → 正常访问
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
c:/code/work/AI_Demo/
|
||
├── server/ # [NEW] 后端服务目录
|
||
│ ├── index.js # [NEW] Express 入口，配置中间件和路由
|
||
│ ├── database.js # [NEW] SQLite 数据库初始化和操作
|
||
│ ├── routes/
|
||
│ │ ├── auth.js # [NEW] 用户认证路由（密码验证）
|
||
│ │ └── admin.js # [NEW] 管理员路由（登录、密码管理）
|
||
│ ├── middleware/
|
||
│ │ ├── auth.js # [NEW] JWT 验证中间件
|
||
│ │ └── rateLimit.js # [NEW] 速率限制中间件
|
||
│ └── utils/
|
||
│ └── jwt.js # [NEW] JWT 生成和验证工具
|
||
├── src/
|
||
│ ├── router/
|
||
│ │ └── index.js # [MODIFY] 添加路由守卫和管理员路由
|
||
│ ├── views/
|
||
│ │ ├── LoginPage.vue # [NEW] 用户密码输入页面
|
||
│ │ ├── AdminLogin.vue # [NEW] 管理员登录页面
|
||
│ │ └── AdminPanel.vue # [NEW] 密码管理面板
|
||
│ ├── utils/
|
||
│ │ └── auth.js # [NEW] 前端认证工具（token 管理、API 调用）
|
||
│ └── config/
|
||
│ └── index.js # [MODIFY] 添加后端 API 地址配置
|
||
├── package.json # [MODIFY] 添加后端依赖和启动脚本
|
||
└── vite.config.js # [MODIFY] 添加后端 API 代理配置
|
||
```
|
||
|
||
## 设计风格
|
||
|
||
采用与现有首页一致的暗色玻璃拟态风格，确保新增页面与整体设计语言统一。
|
||
|
||
## 页面设计
|
||
|
||
### 1. 密码输入页
|
||
|
||
- **整体布局**：居中卡片式布局，深色背景
|
||
- **卡片内容**：标题"访问验证"、密码输入框、提交按钮
|
||
- **交互效果**：输入框聚焦发光、按钮悬停动画、错误提示淡入淡出
|
||
- **视觉风格**：玻璃拟态卡片、渐变边框、模糊背景
|
||
|
||
### 2. 管理员登录页
|
||
|
||
- **布局**：与密码输入页类似的居中卡片
|
||
- **内容**：用户名输入框、密码输入框、登录按钮
|
||
- **区分设计**：使用不同的主题色（琥珀色系）区分管理员入口
|
||
|
||
### 3. 管理员面板
|
||
|
||
- **顶部导航**：面包屑导航、退出登录按钮
|
||
- **主区域**：
|
||
- 统计卡片：显示当前密码总数
|
||
- 密码列表：表格展示所有密码（名称、创建时间、操作按钮）
|
||
- 添加表单：名称输入、密码输入、添加按钮（可折叠）
|
||
- **交互**：添加成功后自动刷新列表、删除操作需二次确认
|
||
|
||
## Agent Extensions
|
||
|
||
### SubAgent
|
||
|
||
- **code-explorer**
|
||
- Purpose: 在实现过程中需要深入探索现有代码模式时使用
|
||
- Expected outcome: 确保新代码与现有代码风格一致，遵循项目约定 |