# 🏗️ 餐厅管理系统登录模块设计方案

## 📊 系统架构图

```mermaid
graph TB
    A[登录页面] --> B{用户类型选择}
    B --> C[管理员 admin]
    B --> D[商户 manager]
    B --> E[客户 customer]

    A --> F[注册页面]
    A --> G[忘记密码页面]

    C --> H[管理员后台 /admin]
    D --> I[商户后台 /merchant]
    E --> J[用户前台 /user]

    K[路由守卫] --> L{Token验证}
    L --> M[有效] --> N[允许访问]
    L --> O[无效] --> P[跳转登录]

    Q[Axios拦截器] --> R[请求拦截器]
    Q --> S[响应拦截器]
    R --> T[自动添加Token]
    S --> U[处理401/403错误]
    U --> P
```

## 🎯 功能模块划分

### 1. 认证模块 (Authentication)

- **用户登录**: 支持三种用户类型选择
- **用户注册**: 完整的注册流程
- **密码管理**: 修改密码功能
- **Token管理**: JWT令牌的存储和管理

### 2. 路由守卫模块 (Route Guards)

- **全局前置守卫**: 检查路由访问权限
- **角色权限控制**: 根据用户类型限制访问
- **登录状态验证**: Token有效性检查

### 3. HTTP拦截器模块 (HTTP Interceptors)

- **请求拦截器**: 自动添加Authorization头
- **响应拦截器**: 统一处理认证错误
- **错误处理**: 401/403自动跳转登录

### 4. 状态管理模块 (State Management)

- **用户状态**: 当前登录用户信息
- **认证状态**: 登录状态管理
- **权限状态**: 用户权限信息

## 📁 文件结构设计

```
src/
├── views/login/                    # 登录相关页面目录
│   ├── LoginPage.vue              # 主登录页面
│   ├── RegisterPage.vue           # 注册页面
│   ├── ChangePasswordPage.vue     # 修改密码页面
│   └── components/                # 登录组件
│       ├── LoginForm.vue          # 登录表单组件
│       ├── RegisterForm.vue       # 注册表单组件
│       ├── UserTypeSelector.vue   # 用户类型选择器
│       └── PasswordStrength.vue   # 密码强度指示器
├── stores/                        # Pinia状态管理
│   ├── auth.ts                    # 认证状态管理
│   └── user.ts                    # 用户信息状态（已存在，需扩展）
├── utils/                         # 工具函数
│   ├── auth.ts                    # 认证相关工具函数
│   ├── http.ts                    # HTTP请求封装
│   ├── storage.ts                 # 本地存储工具
│   └── validation.ts              # 表单验证工具
├── api/                           # API接口
│   └── auth.ts                    # 认证相关API
├── router/                        # 路由配置（需扩展）
│   ├── index.ts                   # 主路由文件（需添加守卫）
│   ├── guards.ts                  # 路由守卫
│   └── auth.ts                    # 认证路由
└── types/                         # TypeScript类型定义
    ├── auth.ts                    # 认证相关类型
    └── user.ts                    # 用户相关类型
```

## 🔒 权限控制设计

### 路由权限映射

```mermaid
graph LR
    A[用户类型] --> B{权限判断}
    B --> C[admin] --> D[可访问 /admin/*]
    B --> E[manager] --> F[可访问 /merchant/*]
    B --> G[customer] --> H[可访问 /user/*]

    I[未登录用户] --> J[只能访问 /login, /register]
```

### 路由守卫逻辑

1. **检查登录状态**: 验证Token是否存在且有效
2. **验证用户权限**: 检查用户类型是否匹配路由权限
3. **重定向逻辑**: 未授权用户跳转到登录页面
4. **登录后跳转**: 根据用户类型跳转到对应模块

## 🛠️ 技术实现方案

### 1. 认证状态管理 (Pinia Store)

```typescript
interface AuthState {
  isAuthenticated: boolean
  token: string | null
  userInfo: UserInfo | null
  userType: 'admin' | 'manager' | 'customer' | null
}
```

### 2. 路由守卫实现

- 使用 `router.beforeEach()` 实现全局前置守卫
- 检查路由meta信息中的权限要求
- 实现角色基础的访问控制 (RBAC)

### 3. Axios拦截器配置

- 请求拦截器自动添加 `Authorization: Bearer {token}`
- 响应拦截器处理401/403错误，自动清除Token并跳转
- 统一错误处理和用户提示

### 4. 表单验证规则

- 用户名：3-20字符，字母数字下划线
- 密码：8-20字符，至少包含字母和数字
- 手机号：11位数字格式验证
- 实时验证和错误提示

## 🎨 UI/UX设计要点

### 1. 登录页面布局

- 响应式设计，支持移动端和桌面端
- 用户类型选择器（Tab切换或下拉选择）
- 记住登录状态选项
- 第三方登录预留接口

### 2. 用户体验优化

- 加载状态指示器
- 友好的错误提示信息
- 密码强度实时检测
- 自动焦点管理

### 3. 安全性考虑

- 密码输入遮盖
- 防止暴力破解（前端限制）
- Token自动刷新机制
- 安全退出清理

## 📋 实施步骤

### 阶段一：基础架构搭建

1. 创建登录页面目录结构
2. 设置认证相关的TypeScript类型
3. 实现基础的Pinia认证状态管理
4. 配置Axios基础设置

### 阶段二：核心功能实现

1. 实现登录表单和API调用
2. 创建用户类型选择器
3. 实现注册和密码修改功能
4. 配置本地存储管理

### 阶段三：安全保障

1. 实现路由守卫逻辑
2. 配置Axios请求/响应拦截器
3. 添加Token验证和刷新机制
4. 实现权限控制

### 阶段四：用户体验优化

1. 添加表单验证和错误处理
2. 实现加载状态和用户反馈
3. 优化页面布局和响应式设计
4. 添加安全退出和会话管理

## 🔄 数据流设计

```mermaid
sequenceDiagram
    participant U as 用户
    participant L as 登录页面
    participant A as API
    participant S as Pinia Store
    participant R as Router

    U->>L: 输入登录信息
    L->>A: 发送登录请求
    A-->>L: 返回Token和用户信息
    L->>S: 保存认证状态
    S->>R: 触发路由跳转
    R-->>U: 跳转到用户对应模块

    Note over U,R: 后续请求自动携带Token
    Note over S: 定期验证Token有效性
```

## 📚 API接口规范

基于项目API文档，主要使用以下接口：

### 认证接口

- `POST /api/auth/login` - 用户登录
- `POST /api/auth/register` - 用户注册
- `PUT /api/auth/change-password` - 修改密码
- `GET /api/auth/current-user` - 获取当前用户信息

### 认证机制

- JWT Token 认证
- Token有效期：24小时
- 请求头格式：`Authorization: Bearer {token}`

## 🔧 开发环境配置

### 技术栈

- Vue 3 + TypeScript
- Vue Router 4
- Pinia (状态管理)
- Element Plus (UI组件库)
- Axios (HTTP客户端)
- Vite (构建工具)

### 开发规范

- 使用 TypeScript 强类型约束
- 采用 Composition API
- 遵循 Vue 3 最佳实践
- 统一代码格式化 (Prettier)

这个设计方案提供了完整的登录系统架构，包含了认证、授权、安全防护等所有必要功能。方案采用模块化设计，便于维护和扩展。
