AI.Demo/.codebuddy/plans/后端密码访问功能开发_c75783e6.md

name	overview	design	todos
后端密码访问功能开发	为 Vue 3 前端项目添加后端密码访问控制功能，使用 Express + SQLite + JWT 实现用户密码验证和管理员密码管理功能	architecture styleKeywords fontSystem colorSystem framework component vue tdesign Glassmorphism Dark Mode Minimalist Gradient Accent fontFamily heading subheading body PingFang SC size weight 28px 600 size weight 18px 500 size weight 16px 400 primary background text functional #6366F1 #8B5CF6 #A855F7 #0F172A #1E293B #334155 #F8FAFC #94A3B8 #64748B #10B981 #EF4444 #F59E0B	id content status setup-backend 创建后端项目结构，安装依赖，初始化 Express 服务和 SQLite 数据库 completed id content status dependencies implement-auth-api 实现用户密码验证 API 和管理员登录 API，包含 JWT 生成和 bcrypt 加密 completed setup-backend id content status dependencies implement-admin-api 实现管理员密码管理 API（增删查），添加 JWT 认证中间件 completed setup-backend id content status create-frontend-auth 创建前端认证工具模块，实现 token 管理和 API 请求封装 completed id content status dependencies create-login-pages 创建用户密码输入页和管理员登录页组件，实现登录验证逻辑 completed create-frontend-auth id content status dependencies create-admin-panel 创建管理员密码管理面板，实现密码列表展示、添加和删除功能 completed create-frontend-auth id content status dependencies add-route-guard 修改路由配置，添加全局路由守卫和管理员路由，配置 Vite 代理 completed 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（已安装）

技术架构

系统架构

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

数据库设计

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