34 lines
1.2 KiB
Markdown
34 lines
1.2 KiB
Markdown
# Spec: 管理后台认证系统
|
|
|
|
## ADDED Requirements
|
|
|
|
#### Scenario: 用户访问登录页面
|
|
**Given** 用户访问 `/login` 路径
|
|
**When** 页面加载完成
|
|
**Then** 显示包含用户名、密码输入框的登录表单，支持中英文切换，提供"记住我"选项
|
|
|
|
#### Scenario: 用户提交登录表单
|
|
**Given** 用户在登录表单中输入用户名和密码
|
|
**When** 点击"登录"按钮
|
|
**Then** 验证表单数据，如果有效则跳转到管理后台主页，否则显示错误信息
|
|
|
|
#### Scenario: 用户登录成功后
|
|
**Given** 用户成功登录
|
|
**When** 认证成功
|
|
**Then** 保存登录状态到本地存储，跳转到 `/admin/dashboard`，更新全局用户状态
|
|
|
|
#### Scenario: 用户未登录访问管理页面
|
|
**Given** 用户未登录
|
|
**When** 尝试访问 `/admin` 路径下的任意页面
|
|
**Then** 自动重定向到 `/login` 页面
|
|
|
|
#### Scenario: 用户退出登录
|
|
**Given** 用户已登录
|
|
**When** 点击退出按钮或清除认证状态
|
|
**Then** 清除登录状态，重定向到 `/login` 页面
|
|
|
|
## 技术实现
|
|
- 使用 Element Plus 的 Form 组件进行表单验证
|
|
- 使用 Vue Router 的路由守卫进行权限控制
|
|
- 使用 localStorage 持久化登录状态
|
|
- 实现表单防抖和加载状态 |