---
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: 确保新代码与现有代码风格一致，遵循项目约定