From 3541ae775589242f4e5cad629498f299af1683b3 Mon Sep 17 00:00:00 2001
From: qq1244 <1244154570@qq.com>
Date: Sat, 21 Jun 2025 11:21:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=AE=8C=E6=95=B4=E7=9A=84?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=B3=BB=E7=BB=9F=E5=92=8C=E9=80=80=E5=87=BA?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增登录、注册、修改密码页面，支持三种用户类型
- 实现路由守卫和权限控制系统
- 集成Axios拦截器处理认证和错误
- 添加统一错误页面处理
- 完善Header组件退出登录功能，清除本地数据并跳转登录页
- 使用Element Plus构建现代化UI界面
- 支持响应式设计和移动端适配
---
 Frontend_API_Documentation.md                 | 645 ++++++++++++++++++
 src/api/auth.ts                               | 109 +++
 src/components/Header.vue                     |  21 +-
 src/main.ts                                   |  16 +-
 src/router/auth.ts                            |  49 ++
 src/router/guards.ts                          | 219 ++++++
 src/router/index.ts                           |  60 ++
 src/stores/auth.ts                            | 147 ++++
 src/types/auth.ts                             |  84 +++
 src/utils/storage.ts                          | 127 ++++
 src/views/ErrorPage.vue                       | 451 ++++++++++++
 src/views/login/ChangePasswordPage.vue        | 421 ++++++++++++
 src/views/login/LoginPage.vue                 | 388 +++++++++++
 src/views/login/RegisterPage.vue              | 442 ++++++++++++
 .../login/components/UserTypeSelector.vue     | 199 ++++++
 登录系统测试指南.md                           | 292 ++++++++
 登录系统设计方案.md                           | 251 +++++++
 17 files changed, 3915 insertions(+), 6 deletions(-)
 create mode 100644 Frontend_API_Documentation.md
 create mode 100644 src/api/auth.ts
 create mode 100644 src/router/auth.ts
 create mode 100644 src/router/guards.ts
 create mode 100644 src/stores/auth.ts
 create mode 100644 src/types/auth.ts
 create mode 100644 src/utils/storage.ts
 create mode 100644 src/views/ErrorPage.vue
 create mode 100644 src/views/login/ChangePasswordPage.vue
 create mode 100644 src/views/login/LoginPage.vue
 create mode 100644 src/views/login/RegisterPage.vue
 create mode 100644 src/views/login/components/UserTypeSelector.vue
 create mode 100644 登录系统测试指南.md
 create mode 100644 登录系统设计方案.md

diff --git a/Frontend_API_Documentation.md b/Frontend_API_Documentation.md
new file mode 100644
index 0000000..e2fb89f
--- /dev/null
+++ b/Frontend_API_Documentation.md
@@ -0,0 +1,645 @@
+# 餐厅管理系统 - 前端API接口文档
+
+## 📋 接口概述
+
+本系统使用JWT Token进行身份认证。除了登录注册接口外，所有API都需要在请求头中携带有效的JWT Token。
+
+**服务器地址**: `http://localhost:8080`
+
+## 🔐 认证机制
+
+### JWT Token使用方式
+- **获取Token**: 通过登录接口获取
+- **使用Token**: 在请求头中添加 `Authorization: Bearer {token}`
+- **Token有效期**: 24小时
+- **无需Token**: 仅注册和登录接口
+
+## 📱 认证相关接口
+
+### 1. 用户注册
+
+**接口地址**: `POST /api/auth/register`  
+**是否需要Token**: ❌ 否
+
+**请求参数**:
+```json
+{
+    "accountName": "用户名（3-20字符，字母数字下划线）",
+    "accountPassword": "密码（8-20字符，至少包含字母和数字）",
+    "confirmPassword": "确认密码（需与密码相同）",
+    "accountPhone": "手机号（11位数字，可选）",
+    "accountType": "账户类型（admin/manager/customer）",
+    "accountGender": "性别（male/female，可选）"
+}
+```
+
+**请求示例**:
+```javascript
+const registerData = {
+    accountName: "zhangsan",
+    accountPassword: "password123",
+    confirmPassword: "password123",
+    accountPhone: "13812345678",
+    accountType: "customer",
+    accountGender: "male"
+};
+
+const response = await fetch('http://localhost:8080/api/auth/register', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(registerData)
+});
+
+const result = await response.json();
+```
+
+**响应示例**:
+```json
+{
+    "code": 200,
+    "msg": "成功",
+    "data": {
+        "token": null,
+        "accountInfo": {
+            "accountId": 1,
+            "accountName": "zhangsan",
+            "accountType": "customer",
+            "accountPhone": "13812345678",
+            "accountGender": "male",
+            "accountImg": null
+        }
+    }
+}
+```
+
+### 2. 用户登录
+
+**接口地址**: `POST /api/auth/login`  
+**是否需要Token**: ❌ 否
+
+**请求参数**:
+```json
+{
+    "accountName": "用户名",
+    "accountPassword": "密码"
+}
+```
+
+**请求示例**:
+```javascript
+const loginData = {
+    accountName: "zhangsan",
+    accountPassword: "password123"
+};
+
+const response = await fetch('http://localhost:8080/api/auth/login', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(loginData)
+});
+
+const result = await response.json();
+
+// 保存Token到本地存储
+if (result.code === 200) {
+    const jwtToken = result.data.token;
+    localStorage.setItem('token', jwtToken);
+    localStorage.setItem('userInfo', JSON.stringify(result.data.accountInfo));
+}
+```
+
+**响应示例**:
+```json
+{
+    "code": 200,
+    "msg": "成功",
+    "data": {
+        "token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ6aGFuZ3NhbiIsImlhdCI6MTcwNDczNzgxLCJleHAiOjE3NTA1NjAxODF9...",
+        "accountInfo": {
+            "accountId": 1,
+            "accountName": "zhangsan",
+            "accountType": "customer",
+            "accountPhone": "13812345678",
+            "accountGender": "male",
+            "accountImg": null
+        }
+    }
+}
+```
+
+### 3. 修改密码
+
+**接口地址**: `PUT /api/auth/change-password`  
+**是否需要Token**: ✅ 是
+
+**请求参数**:
+```json
+{
+    "oldPassword": "当前密码",
+    "newPassword": "新密码（8-20字符，至少包含字母和数字）",
+    "confirmPassword": "确认新密码"
+}
+```
+
+**请求示例**:
+```javascript
+// 获取存储的Token
+const storedToken = localStorage.getItem('token');
+
+const passwordData = {
+    oldPassword: "password123",
+    newPassword: "newpassword456",
+    confirmPassword: "newpassword456"
+};
+
+// 构建请求头，确保完整Token传递
+const headers = {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${storedToken}`
+};
+
+const response = await fetch('http://localhost:8080/api/auth/change-password', {
+    method: 'PUT',
+    headers: headers,
+    body: JSON.stringify(passwordData)
+});
+
+const result = await response.json();
+```
+
+**响应示例**:
+```json
+{
+    "code": 200,
+    "msg": "成功",
+    "data": "密码修改成功"
+}
+```
+
+### 4. 获取当前用户信息
+
+**接口地址**: `GET /api/auth/current-user`  
+**是否需要Token**: ✅ 是
+
+**请求示例**:
+```javascript
+// 获取存储的Token
+const authToken = localStorage.getItem('token');
+
+// 构建请求头
+const requestHeaders = {
+    'Authorization': `Bearer ${authToken}`
+};
+
+const response = await fetch('http://localhost:8080/api/auth/current-user', {
+    method: 'GET',
+    headers: requestHeaders
+});
+
+const result = await response.json();
+```
+
+**响应示例**:
+```json
+{
+    "code": 200,
+    "msg": "成功",
+    "data": "当前登录用户: zhangsan"
+}
+```
+
+## 🔧 前端Token管理
+
+### Token存储和使用
+
+```javascript
+class AuthManager {
+    // 保存Token - 确保完整保存
+    static saveToken(tokenString, userInfo) {
+        if (tokenString && tokenString.trim()) {
+            localStorage.setItem('token', tokenString);
+            localStorage.setItem('userInfo', JSON.stringify(userInfo));
+        }
+    }
+
+    // 获取完整Token
+    static getToken() {
+        const tokenValue = localStorage.getItem('token');
+        return tokenValue ? tokenValue.trim() : null;
+    }
+
+    // 获取用户信息
+    static getUserInfo() {
+        const userInfo = localStorage.getItem('userInfo');
+        return userInfo ? JSON.parse(userInfo) : null;
+    }
+
+    // 清除Token（登出）
+    static logout() {
+        localStorage.removeItem('token');
+        localStorage.removeItem('userInfo');
+    }
+
+    // 检查是否已登录
+    static isLoggedIn() {
+        const token = this.getToken();
+        return token && token.length > 0;
+    }
+
+    // 创建认证头 - 确保完整Token传递
+    static getAuthHeaders() {
+        const fullToken = this.getToken();
+        return fullToken ? { 'Authorization': `Bearer ${fullToken}` } : {};
+    }
+}
+```
+
+### 统一请求封装
+
+```javascript
+class ApiClient {
+    static baseURL = 'http://localhost:8080';
+
+    // 通用请求方法 - 使用变量方式确保Token完整传递
+    static async request(url, options = {}) {
+        // 获取完整Token
+        const currentToken = AuthManager.getToken();
+        
+        // 构建基础headers
+        const baseHeaders = {
+            'Content-Type': 'application/json'
+        };
+
+        // 如果有Token，添加认证header
+        const authHeaders = currentToken ? { 'Authorization': `Bearer ${currentToken}` } : {};
+        
+        // 合并headers
+        const finalHeaders = {
+            ...baseHeaders,
+            ...authHeaders,
+            ...(options.headers || {})
+        };
+
+        const config = {
+            ...options,
+            headers: finalHeaders
+        };
+
+        try {
+            const response = await fetch(`${this.baseURL}${url}`, config);
+            const result = await response.json();
+
+            // 处理认证失败
+            if (response.status === 403 || response.status === 401) {
+                AuthManager.logout();
+                // 跳转到登录页面
+                window.location.href = '/login';
+                return null;
+            }
+
+            return result;
+        } catch (error) {
+            console.error('API请求失败:', error);
+            throw error;
+        }
+    }
+
+    // GET请求
+    static async get(url) {
+        return this.request(url, { method: 'GET' });
+    }
+
+    // POST请求
+    static async post(url, data) {
+        return this.request(url, {
+            method: 'POST',
+            body: JSON.stringify(data)
+        });
+    }
+
+    // PUT请求
+    static async put(url, data) {
+        return this.request(url, {
+            method: 'PUT',
+            body: JSON.stringify(data)
+        });
+    }
+
+    // DELETE请求
+    static async delete(url) {
+        return this.request(url, { method: 'DELETE' });
+    }
+}
+```
+
+### 认证相关操作
+
+```javascript
+class AuthAPI {
+    // 用户注册
+    static async register(userData) {
+        return ApiClient.post('/api/auth/register', userData);
+    }
+
+    // 用户登录 - 确保完整Token保存
+    static async login(credentials) {
+        const result = await ApiClient.post('/api/auth/login', credentials);
+        
+        if (result && result.code === 200) {
+            // 获取完整Token并保存
+            const completeToken = result.data.token;
+            AuthManager.saveToken(completeToken, result.data.accountInfo);
+        }
+        
+        return result;
+    }
+
+    // 修改密码 - 使用变量方式传递Token
+    static async changePassword(passwordData) {
+        // 获取完整Token
+        const userToken = AuthManager.getToken();
+        
+        // 构建请求头
+        const requestHeaders = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${userToken}`
+        };
+
+        // 直接使用fetch确保Token完整传递
+        const response = await fetch(`${ApiClient.baseURL}/api/auth/change-password`, {
+            method: 'PUT',
+            headers: requestHeaders,
+            body: JSON.stringify(passwordData)
+        });
+
+        return await response.json();
+    }
+
+    // 获取当前用户 - 使用变量方式传递Token
+    static async getCurrentUser() {
+        const accessToken = AuthManager.getToken();
+        const headers = { 'Authorization': `Bearer ${accessToken}` };
+        
+        const response = await fetch(`${ApiClient.baseURL}/api/auth/current-user`, {
+            method: 'GET',
+            headers: headers
+        });
+
+        return await response.json();
+    }
+
+    // 登出
+    static logout() {
+        AuthManager.logout();
+        window.location.href = '/login';
+    }
+}
+```
+
+## 🎯 使用示例
+
+### 登录页面
+
+```javascript
+// 登录表单提交
+async function handleLogin(event) {
+    event.preventDefault();
+    
+    const formData = new FormData(event.target);
+    const loginCredentials = {
+        accountName: formData.get('username'),
+        accountPassword: formData.get('password')
+    };
+
+    try {
+        const loginResult = await AuthAPI.login(loginCredentials);
+        
+        if (loginResult.code === 200) {
+            alert('登录成功！');
+            // 验证Token是否正确保存
+            const savedToken = AuthManager.getToken();
+            console.log('Token已保存:', savedToken ? '是' : '否');
+            
+            window.location.href = '/dashboard';
+        } else {
+            alert(`登录失败：${loginResult.msg}`);
+        }
+    } catch (error) {
+        alert('登录请求失败，请检查网络连接');
+    }
+}
+```
+
+### 注册页面
+
+```javascript
+// 注册表单提交
+async function handleRegister(event) {
+    event.preventDefault();
+    
+    const formData = new FormData(event.target);
+    const registrationData = {
+        accountName: formData.get('username'),
+        accountPassword: formData.get('password'),
+        confirmPassword: formData.get('confirmPassword'),
+        accountPhone: formData.get('phone'),
+        accountType: formData.get('userType'),
+        accountGender: formData.get('gender')
+    };
+
+    try {
+        const registerResult = await AuthAPI.register(registrationData);
+        
+        if (registerResult.code === 200) {
+            alert('注册成功！请登录');
+            window.location.href = '/login';
+        } else {
+            alert(`注册失败：${registerResult.msg}`);
+        }
+    } catch (error) {
+        alert('注册请求失败，请检查网络连接');
+    }
+}
+```
+
+### 修改密码页面
+
+```javascript
+// 修改密码表单提交
+async function handleChangePassword(event) {
+    event.preventDefault();
+    
+    const formData = new FormData(event.target);
+    const changePasswordInfo = {
+        oldPassword: formData.get('oldPassword'),
+        newPassword: formData.get('newPassword'),
+        confirmPassword: formData.get('confirmPassword')
+    };
+
+    try {
+        // 使用专门的方法确保Token完整传递
+        const changeResult = await AuthAPI.changePassword(changePasswordInfo);
+        
+        if (changeResult.code === 200) {
+            alert('密码修改成功！');
+        } else {
+            alert(`密码修改失败：${changeResult.msg}`);
+        }
+    } catch (error) {
+        alert('请求失败，请检查网络连接');
+    }
+}
+```
+
+### 业务API调用示例
+
+```javascript
+// 获取数据列表 - 使用变量方式确保Token传递
+async function fetchDataWithAuth(apiEndpoint) {
+    try {
+        // 获取完整Token
+        const authenticationToken = AuthManager.getToken();
+        
+        if (!authenticationToken) {
+            alert('请先登录');
+            window.location.href = '/login';
+            return;
+        }
+
+        // 构建请求头
+        const apiHeaders = {
+            'Authorization': `Bearer ${authenticationToken}`
+        };
+
+        const response = await fetch(`http://localhost:8080${apiEndpoint}`, {
+            method: 'GET',
+            headers: apiHeaders
+        });
+
+        const result = await response.json();
+        
+        if (result && result.code === 200) {
+            return result.data;
+        } else {
+            alert(`请求失败：${result.msg}`);
+            return null;
+        }
+    } catch (error) {
+        alert('请求失败，请检查网络连接');
+        return null;
+    }
+}
+
+// 发送数据 - 使用变量方式确保Token传递
+async function postDataWithAuth(apiEndpoint, postData) {
+    try {
+        // 获取完整Token
+        const userAuthToken = AuthManager.getToken();
+        
+        if (!userAuthToken) {
+            alert('请先登录');
+            window.location.href = '/login';
+            return;
+        }
+
+        // 构建请求头
+        const requestHeaders = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${userAuthToken}`
+        };
+
+        const response = await fetch(`http://localhost:8080${apiEndpoint}`, {
+            method: 'POST',
+            headers: requestHeaders,
+            body: JSON.stringify(postData)
+        });
+
+        const result = await response.json();
+        
+        if (result && result.code === 200) {
+            return result.data;
+        } else {
+            alert(`操作失败：${result.msg}`);
+            return null;
+        }
+    } catch (error) {
+        alert('请求失败，请检查网络连接');
+        return null;
+    }
+}
+```
+
+## 🚨 错误处理
+
+### 常见错误码
+
+| 错误码 | 说明 | 处理方式 |
+|--------|------|----------|
+| 200 | 成功 | 正常处理数据 |
+| 401 | 未认证 | 跳转到登录页面 |
+| 403 | 已禁止/Token无效 | 清除Token，跳转到登录页面 |
+| 500 | 服务器错误 | 显示错误信息，建议重试 |
+
+### Token验证和错误处理
+
+```javascript
+// 页面加载时验证Token有效性
+async function validateTokenOnPageLoad() {
+    const currentToken = AuthManager.getToken();
+    
+    if (!currentToken) {
+        // 没有Token，跳转到登录页
+        window.location.href = '/login';
+        return;
+    }
+
+    try {
+        // 测试Token是否有效
+        const testHeaders = { 'Authorization': `Bearer ${currentToken}` };
+        
+        const testResponse = await fetch('http://localhost:8080/api/auth/test', {
+            method: 'GET',
+            headers: testHeaders
+        });
+
+        if (testResponse.status === 403 || testResponse.status === 401) {
+            // Token无效，清除并跳转
+            AuthManager.logout();
+            window.location.href = '/login';
+        }
+    } catch (error) {
+        console.error('Token验证失败:', error);
+    }
+}
+
+// 页面加载时执行Token验证
+window.addEventListener('DOMContentLoaded', validateTokenOnPageLoad);
+```
+
+## 📝 重要注意事项
+
+1. **Token完整性**: 
+   - 始终使用变量方式传递Token，避免字符串截断
+   - 在存储和读取Token时检查完整性
+
+2. **Token安全**: 
+   - Token存储在localStorage中，注意防止XSS攻击
+   - 生产环境建议考虑更安全的存储方式
+
+3. **请求头构建**:
+   - 使用变量方式构建Authorization头
+   - 确保Token前缀"Bearer "正确添加
+
+4. **错误处理**:
+   - 统一处理401/403错误，自动跳转登录页
+   - 为用户提供友好的错误提示
+
+5. **调试建议**:
+   - 在控制台检查Token是否完整
+   - 验证请求头是否正确设置
+
+这份文档强调了使用变量方式来确保Token完整传递，避免了直接字符串拼接可能导致的截断问题！
\ No newline at end of file
diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 0000000..8b5221f
--- /dev/null
+++ b/src/api/auth.ts
@@ -0,0 +1,109 @@
+import axios from 'axios'
+import type {
+  LoginRequest,
+  RegisterRequest,
+  ChangePasswordRequest,
+  ApiResponse,
+  LoginResponseData,
+  UserInfo,
+} from '@/types/auth'
+import { StorageManager } from '@/utils/storage'
+
+// 创建axios实例
+const api = axios.create({
+  baseURL: 'http://localhost:8080',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// 请求拦截器 - 自动添加Token
+api.interceptors.request.use(
+  (config) => {
+    const token = StorageManager.getToken()
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+// 响应拦截器 - 处理认证错误
+api.interceptors.response.use(
+  (response) => {
+    return response
+  },
+  (error) => {
+    if (error.response?.status === 401) {
+      // Token无效，清除存储并跳转错误页面
+      StorageManager.clearAuthData()
+      window.location.href = '/error?type=auth&message=登录已过期，请重新登录'
+    } else if (error.response?.status === 403) {
+      // 权限不足
+      window.location.href = '/error?type=403&message=您没有权限访问此资源'
+    } else if (error.response?.status === 500) {
+      // 服务器错误
+      window.location.href = '/error?type=500&message=服务器内部错误，请稍后重试'
+    } else if (!error.response) {
+      // 网络错误
+      window.location.href = '/error?type=network&message=网络连接失败，请检查网络设置'
+    }
+    return Promise.reject(error)
+  },
+)
+
+/**
+ * 认证相关API
+ */
+export class AuthAPI {
+  /**
+   * 用户登录
+   */
+  static async login(credentials: LoginRequest): Promise<ApiResponse<LoginResponseData>> {
+    const response = await api.post('/api/auth/login', credentials)
+
+    // 登录成功后保存Token和用户信息
+    if (response.data.code === 200) {
+      const { token, accountInfo } = response.data.data
+      StorageManager.saveAuthInfo(token, accountInfo)
+    }
+
+    return response.data
+  }
+
+  /**
+   * 用户注册
+   */
+  static async register(userData: RegisterRequest): Promise<ApiResponse<UserInfo>> {
+    const response = await api.post('/api/auth/register', userData)
+    return response.data
+  }
+
+  /**
+   * 修改密码
+   */
+  static async changePassword(passwordData: ChangePasswordRequest): Promise<ApiResponse<string>> {
+    const response = await api.put('/api/auth/change-password', passwordData)
+    return response.data
+  }
+
+  /**
+   * 获取当前用户信息
+   */
+  static async getCurrentUser(): Promise<ApiResponse<string>> {
+    const response = await api.get('/api/auth/current-user')
+    return response.data
+  }
+
+  /**
+   * 登出
+   */
+  static logout(): void {
+    StorageManager.clearAuthData()
+    window.location.href = '/login'
+  }
+}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8fa1bcb..500cbef 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -20,7 +20,7 @@
           alt="用户头像"
         >
         </el-avatar>
-        <el-dropdown>
+        <el-dropdown @command="handleDropdownCommand">
           <span class="user"
             >{{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon
           ></span>
@@ -28,9 +28,7 @@
             <el-dropdown-menu>
               <el-dropdown-item command="a">账号管理</el-dropdown-item>
               <el-dropdown-item command="b">资质认证</el-dropdown-item>
-              <el-dropdown-item command="c">退出账号</el-dropdown-item>
-              <!-- <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
-              <el-dropdown-item command="e" divided>Action 5</el-dropdown-item> -->
+              <el-dropdown-item command="logout">退出账号</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -45,10 +43,25 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
 const user = ref({ name: 'admin' })
 
 const emit = defineEmits(['collapse-change', 'button-click', 'input-change'])
 
+// 处理下拉菜单命令
+const handleDropdownCommand = (command: string) => {
+  if (command === 'logout') {
+    // 清除本地用户数据和token
+    authStore.logout()
+    // 返回登录界面
+    router.push('/login')
+  }
+}
+
 const handleClick = () => {
   // 派发事件，不传参数
   emit('button-click')
diff --git a/src/main.ts b/src/main.ts
index fb0e625..cdf4d19 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,9 +9,15 @@ import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
+import { useAuthStore } from '@/stores/auth'
 
 const app = createApp(App)
 
+// 创建 Pinia 实例
+const pinia = createPinia()
+app.use(pinia)
+
+// 初始化高德地图
 initAMapApiLoader({
   // 在这里替换成你申请的 Key
   key: '5a5935de1c13991663c5b222e1ad2392',
@@ -21,15 +27,21 @@ initAMapApiLoader({
   securityJsCode: '52dec9705905111f788fcc1ba9b385d6', // 如果你设置了安全密钥
 })
 
+// 注册 Element Plus 图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+// 使用插件
 app.use(router)
-
 app.use(ElementPlus, {
   locale: zhCn,
 })
-app.use(createPinia())
 app.use(VueAMap)
+
+// 初始化认证状态
+const authStore = useAuthStore()
+authStore.initAuth()
+
+// 挂载应用
 app.mount('#app')
diff --git a/src/router/auth.ts b/src/router/auth.ts
new file mode 100644
index 0000000..a2828eb
--- /dev/null
+++ b/src/router/auth.ts
@@ -0,0 +1,49 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+// 导入登录相关组件
+const LoginPage = () => import('@/views/login/LoginPage.vue')
+const RegisterPage = () => import('@/views/login/RegisterPage.vue')
+const ChangePasswordPage = () => import('@/views/login/ChangePasswordPage.vue')
+
+// 认证相关路由配置
+export const authRoutes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginPage,
+    meta: {
+      title: '用户登录',
+      requiresAuth: false,
+      layout: 'blank', // 使用空白布局
+    },
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: RegisterPage,
+    meta: {
+      title: '用户注册',
+      requiresAuth: false,
+      layout: 'blank',
+    },
+  },
+  {
+    path: '/change-password',
+    name: 'ChangePassword',
+    component: ChangePasswordPage,
+    meta: {
+      title: '修改密码',
+      requiresAuth: true,
+      allowedRoles: ['admin', 'manager', 'customer'],
+    },
+  },
+]
+
+// 创建认证路由实例
+const authRouter = createRouter({
+  history: createWebHistory(),
+  routes: authRoutes,
+})
+
+export default authRouter
diff --git a/src/router/guards.ts b/src/router/guards.ts
new file mode 100644
index 0000000..3f5748f
--- /dev/null
+++ b/src/router/guards.ts
@@ -0,0 +1,219 @@
+import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { StorageManager } from '@/utils/storage'
+import { ElMessage } from 'element-plus'
+import type { UserType } from '@/types/auth'
+
+// 路由权限配置
+const ROUTE_PERMISSIONS: Record<string, UserType[]> = {
+  '/admin': ['admin'],
+  '/merchant': ['manager'],
+  '/user': ['customer'],
+  '/login': [], // 公开路由
+  '/register': [], // 公开路由
+  '/change-password': ['admin', 'manager', 'customer'], // 需要登录
+}
+
+// 公开路由（不需要认证）
+const PUBLIC_ROUTES = ['/login', '/register', '/', '/error']
+
+/**
+ * 全局前置守卫
+ * 检查用户认证状态和权限
+ */
+export const createAuthGuard = () => {
+  return async (
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+    next: NavigationGuardNext,
+  ) => {
+    const authStore = useAuthStore()
+
+    // 初始化认证状态（从本地存储恢复）
+    if (!authStore.isAuthenticated && StorageManager.isLoggedIn()) {
+      authStore.initAuth()
+    }
+
+    const targetPath = to.path
+    const isPublicRoute = PUBLIC_ROUTES.some(
+      (route) => targetPath === route || targetPath.startsWith(route),
+    )
+
+    // 如果是公开路由，直接通过
+    if (isPublicRoute) {
+      // 如果已登录用户访问登录页，重定向到对应模块
+      if (targetPath === '/login' && authStore.isAuthenticated) {
+        const redirectPath = authStore.getRedirectPath()
+        next(redirectPath)
+        return
+      }
+      next()
+      return
+    }
+
+    // 检查是否已登录
+    if (!authStore.isAuthenticated) {
+      ElMessage.warning('请先登录')
+      next({
+        path: '/error',
+        query: {
+          type: 'auth',
+          message: '请先登录',
+          redirect: to.fullPath,
+        },
+      })
+      return
+    }
+
+    // 检查路由权限
+    const requiredRoles = getRequiredRoles(targetPath)
+    if (requiredRoles.length > 0 && !hasPermission(authStore.userType, requiredRoles)) {
+      ElMessage.error('您没有权限访问此页面')
+      next({
+        path: '/error',
+        query: {
+          type: '403',
+          message: '您没有权限访问此页面',
+          path: targetPath,
+        },
+      })
+      return
+    }
+
+    // 验证通过，允许访问
+    next()
+  }
+}
+
+/**
+ * 获取路由所需的角色权限
+ */
+function getRequiredRoles(path: string): UserType[] {
+  // 查找最匹配的路由权限配置
+  for (const [routePath, roles] of Object.entries(ROUTE_PERMISSIONS)) {
+    if (path.startsWith(routePath)) {
+      return roles
+    }
+  }
+
+  // 默认需要登录（任何角色都可以访问）
+  return ['admin', 'manager', 'customer']
+}
+
+/**
+ * 检查用户是否有访问权限
+ */
+function hasPermission(userType: UserType | null, requiredRoles: UserType[]): boolean {
+  if (!userType) return false
+  if (requiredRoles.length === 0) return true
+  return requiredRoles.includes(userType)
+}
+
+/**
+ * 全局后置守卫
+ * 处理页面标题等
+ */
+export const createAfterGuard = () => {
+  return (to: RouteLocationNormalized) => {
+    // 设置页面标题
+    const title = getPageTitle(to.path, to.meta?.title as string)
+    document.title = title
+  }
+}
+
+/**
+ * 获取页面标题
+ */
+function getPageTitle(path: string, metaTitle?: string): string {
+  const baseTitle = '餐厅管理系统'
+
+  if (metaTitle) {
+    return `${metaTitle} - ${baseTitle}`
+  }
+
+  // 根据路径生成标题
+  const titleMap: Record<string, string> = {
+    '/login': '用户登录',
+    '/register': '用户注册',
+    '/change-password': '修改密码',
+    '/admin': '管理员后台',
+    '/merchant': '商户后台',
+    '/user': '用户中心',
+  }
+
+  for (const [routePath, title] of Object.entries(titleMap)) {
+    if (path.startsWith(routePath)) {
+      return `${title} - ${baseTitle}`
+    }
+  }
+
+  return baseTitle
+}
+
+/**
+ * 路由错误处理
+ */
+export const createErrorHandler = () => {
+  return (error: any) => {
+    console.error('路由错误:', error)
+    ElMessage.error('页面加载失败，请重试')
+  }
+}
+
+/**
+ * Token过期处理
+ */
+export const handleTokenExpired = () => {
+  const authStore = useAuthStore()
+  authStore.logout()
+  ElMessage.warning('登录已过期，请重新登录')
+  // 如果当前不在登录页，则跳转到登录页
+  if (window.location.pathname !== '/login') {
+    window.location.href = '/login'
+  }
+}
+
+/**
+ * 权限验证中间件
+ * 可在组件中使用
+ */
+export const usePermissionCheck = () => {
+  const authStore = useAuthStore()
+
+  return {
+    /**
+     * 检查是否有指定权限
+     */
+    hasRole: (role: UserType): boolean => {
+      return authStore.userType === role
+    },
+
+    /**
+     * 检查是否有任一权限
+     */
+    hasAnyRole: (roles: UserType[]): boolean => {
+      return roles.some((role) => authStore.userType === role)
+    },
+
+    /**
+     * 检查是否为管理员
+     */
+    isAdmin: (): boolean => {
+      return authStore.userType === 'admin'
+    },
+
+    /**
+     * 检查是否为商户
+     */
+    isMerchant: (): boolean => {
+      return authStore.userType === 'manager'
+    },
+
+    /**
+     * 检查是否为客户
+     */
+    isCustomer: (): boolean => {
+      return authStore.userType === 'customer'
+    },
+  }
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 7c27182..5499cbe 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,23 +2,83 @@ import { createRouter, createWebHistory } from 'vue-router'
 import adminRouter from './admin'
 import merchantRouter from './merchant'
 import userRouter from './user'
+import { authRoutes } from './auth'
+import { createAuthGuard, createAfterGuard, createErrorHandler } from './guards'
+
+// 导入错误页面
+const ErrorPage = () => import('@/views/ErrorPage.vue')
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    // 根路径重定向到登录页
+    {
+      path: '/',
+      redirect: '/login',
+    },
+    // 错误页面路由
+    {
+      path: '/error',
+      name: 'Error',
+      component: ErrorPage,
+      meta: {
+        title: '系统错误',
+        requiresAuth: false,
+        layout: 'blank',
+      },
+    },
+    // 认证相关路由
+    ...authRoutes,
+    // 现有的业务路由
     {
       path: '/admin',
       children: [...adminRouter.options.routes],
+      meta: {
+        requiresAuth: true,
+        allowedRoles: ['admin'],
+      },
     },
     {
       path: '/merchant',
       children: [...merchantRouter.options.routes],
+      meta: {
+        requiresAuth: true,
+        allowedRoles: ['manager'],
+      },
     },
     {
       path: '/user',
       children: [...userRouter.options.routes],
+      meta: {
+        requiresAuth: true,
+        allowedRoles: ['customer'],
+      },
+    },
+    // 404 页面 - 重定向到错误页面
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      redirect: (to) => {
+        return {
+          path: '/error',
+          query: {
+            type: '404',
+            message: '页面未找到',
+            path: to.path,
+          },
+        }
+      },
     },
   ],
 })
 
+// 注册全局前置守卫
+router.beforeEach(createAuthGuard())
+
+// 注册全局后置守卫
+router.afterEach(createAfterGuard())
+
+// 注册路由错误处理
+router.onError(createErrorHandler())
+
 export default router
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
new file mode 100644
index 0000000..6979ebf
--- /dev/null
+++ b/src/stores/auth.ts
@@ -0,0 +1,147 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { UserInfo, UserType, AuthState } from '@/types/auth'
+import { StorageManager } from '@/utils/storage'
+import { AuthAPI } from '@/api/auth'
+
+export const useAuthStore = defineStore('auth', () => {
+  // 状态
+  const token = ref<string | null>(null)
+  const userInfo = ref<UserInfo | null>(null)
+  const isAuthenticated = ref<boolean>(false)
+
+  // 计算属性
+  const userType = computed<UserType | null>(() => {
+    return userInfo.value?.accountType || null
+  })
+
+  const userName = computed<string>(() => {
+    return userInfo.value?.accountName || ''
+  })
+
+  const userId = computed<number | null>(() => {
+    return userInfo.value?.accountId || null
+  })
+
+  // 初始化认证状态
+  const initAuth = () => {
+    const authInfo = StorageManager.getAuthInfo()
+    if (authInfo.token && authInfo.userInfo) {
+      token.value = authInfo.token
+      userInfo.value = authInfo.userInfo
+      isAuthenticated.value = true
+    }
+  }
+
+  // 登录
+  const login = async (credentials: { accountName: string; accountPassword: string }) => {
+    try {
+      const response = await AuthAPI.login(credentials)
+
+      if (response.code === 200) {
+        const { token: newToken, accountInfo } = response.data
+
+        // 更新状态
+        token.value = newToken
+        userInfo.value = accountInfo
+        isAuthenticated.value = true
+
+        return { success: true, message: '登录成功' }
+      } else {
+        return { success: false, message: response.msg || '登录失败' }
+      }
+    } catch (error: any) {
+      console.error('登录错误:', error)
+      return {
+        success: false,
+        message: error.response?.data?.msg || '网络错误，请重试',
+      }
+    }
+  }
+
+  // 注册
+  const register = async (userData: any) => {
+    try {
+      const response = await AuthAPI.register(userData)
+
+      if (response.code === 200) {
+        return { success: true, message: '注册成功' }
+      } else {
+        return { success: false, message: response.msg || '注册失败' }
+      }
+    } catch (error: any) {
+      console.error('注册错误:', error)
+      return {
+        success: false,
+        message: error.response?.data?.msg || '网络错误，请重试',
+      }
+    }
+  }
+
+  // 修改密码
+  const changePassword = async (passwordData: any) => {
+    try {
+      const response = await AuthAPI.changePassword(passwordData)
+
+      if (response.code === 200) {
+        return { success: true, message: '密码修改成功' }
+      } else {
+        return { success: false, message: response.msg || '密码修改失败' }
+      }
+    } catch (error: any) {
+      console.error('修改密码错误:', error)
+      return {
+        success: false,
+        message: error.response?.data?.msg || '网络错误，请重试',
+      }
+    }
+  }
+
+  // 登出
+  const logout = () => {
+    token.value = null
+    userInfo.value = null
+    isAuthenticated.value = false
+    StorageManager.clearAuthData()
+  }
+
+  // 检查权限
+  const hasPermission = (requiredRole: UserType): boolean => {
+    return userType.value === requiredRole
+  }
+
+  // 获取重定向路径
+  const getRedirectPath = (): string => {
+    switch (userType.value) {
+      case 'admin':
+        return '/admin'
+      case 'manager':
+        return '/merchant'
+      case 'customer':
+        return '/user'
+      default:
+        return '/login'
+    }
+  }
+
+  return {
+    // 状态
+    token,
+    userInfo,
+    isAuthenticated,
+
+    // 计算属性
+    userType,
+    userName,
+    userId,
+
+    // 方法
+    initAuth,
+    login,
+    register,
+    changePassword,
+    logout,
+    hasPermission,
+    getRedirectPath,
+  }
+})
diff --git a/src/types/auth.ts b/src/types/auth.ts
new file mode 100644
index 0000000..f398424
--- /dev/null
+++ b/src/types/auth.ts
@@ -0,0 +1,84 @@
+// 用户类型枚举
+export type UserType = 'admin' | 'manager' | 'customer'
+
+// 性别类型
+export type Gender = 'male' | 'female'
+
+// 用户信息接口
+export interface UserInfo {
+  accountId: number
+  accountName: string
+  accountType: UserType
+  accountPhone?: string
+  accountGender?: Gender
+  accountImg?: string | null
+}
+
+// 登录请求接口
+export interface LoginRequest {
+  accountName: string
+  accountPassword: string
+}
+
+// 注册请求接口
+export interface RegisterRequest {
+  accountName: string
+  accountPassword: string
+  confirmPassword: string
+  accountPhone?: string
+  accountType: UserType
+  accountGender?: Gender
+}
+
+// 修改密码请求接口
+export interface ChangePasswordRequest {
+  oldPassword: string
+  newPassword: string
+  confirmPassword: string
+}
+
+// API响应基础接口
+export interface ApiResponse<T = any> {
+  code: number
+  msg: string
+  data: T
+}
+
+// 登录响应数据
+export interface LoginResponseData {
+  token: string
+  accountInfo: UserInfo
+}
+
+// 认证状态接口
+export interface AuthState {
+  isAuthenticated: boolean
+  token: string | null
+  userInfo: UserInfo | null
+  userType: UserType | null
+}
+
+// 路由权限配置
+export interface RoutePermission {
+  path: string
+  allowedRoles: UserType[]
+  requiresAuth: boolean
+}
+
+// 表单验证规则
+export interface ValidationRule {
+  required?: boolean
+  message?: string
+  pattern?: RegExp
+  min?: number
+  max?: number
+  validator?: (value: string) => boolean | string
+}
+
+// 表单验证规则集合
+export interface FormValidationRules {
+  accountName: ValidationRule[]
+  accountPassword: ValidationRule[]
+  confirmPassword?: ValidationRule[]
+  accountPhone?: ValidationRule[]
+}
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000..b71e7c9
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,127 @@
+import type { UserInfo } from '@/types/auth'
+
+// 存储键名常量
+export const STORAGE_KEYS = {
+  TOKEN: 'token',
+  USER_INFO: 'userInfo',
+  REMEMBER_LOGIN: 'rememberLogin',
+} as const
+
+/**
+ * 本地存储工具类
+ */
+export class StorageManager {
+  /**
+   * 保存Token到本地存储
+   * @param token JWT Token字符串
+   */
+  static saveToken(token: string): void {
+    if (token && token.trim()) {
+      localStorage.setItem(STORAGE_KEYS.TOKEN, token.trim())
+    }
+  }
+
+  /**
+   * 获取本地存储的Token
+   * @returns Token字符串或null
+   */
+  static getToken(): string | null {
+    const token = localStorage.getItem(STORAGE_KEYS.TOKEN)
+    return token ? token.trim() : null
+  }
+
+  /**
+   * 保存用户信息到本地存储
+   * @param userInfo 用户信息对象
+   */
+  static saveUserInfo(userInfo: UserInfo): void {
+    localStorage.setItem(STORAGE_KEYS.USER_INFO, JSON.stringify(userInfo))
+  }
+
+  /**
+   * 获取本地存储的用户信息
+   * @returns 用户信息对象或null
+   */
+  static getUserInfo(): UserInfo | null {
+    const userInfo = localStorage.getItem(STORAGE_KEYS.USER_INFO)
+    try {
+      return userInfo ? JSON.parse(userInfo) : null
+    } catch (error) {
+      console.error('解析用户信息失败:', error)
+      return null
+    }
+  }
+
+  /**
+   * 保存"记住登录"状态
+   * @param remember 是否记住登录
+   */
+  static saveRememberLogin(remember: boolean): void {
+    localStorage.setItem(STORAGE_KEYS.REMEMBER_LOGIN, JSON.stringify(remember))
+  }
+
+  /**
+   * 获取"记住登录"状态
+   * @returns 是否记住登录
+   */
+  static getRememberLogin(): boolean {
+    const remember = localStorage.getItem(STORAGE_KEYS.REMEMBER_LOGIN)
+    try {
+      return remember ? JSON.parse(remember) : false
+    } catch (error) {
+      return false
+    }
+  }
+
+  /**
+   * 检查是否已登录（有效Token存在）
+   * @returns 是否已登录
+   */
+  static isLoggedIn(): boolean {
+    const token = this.getToken()
+    return !!(token && token.length > 0)
+  }
+
+  /**
+   * 清除所有认证相关的存储数据（登出）
+   */
+  static clearAuthData(): void {
+    localStorage.removeItem(STORAGE_KEYS.TOKEN)
+    localStorage.removeItem(STORAGE_KEYS.USER_INFO)
+    localStorage.removeItem(STORAGE_KEYS.REMEMBER_LOGIN)
+  }
+
+  /**
+   * 创建认证请求头
+   * @returns 包含Authorization的请求头对象
+   */
+  static getAuthHeaders(): Record<string, string> {
+    const token = this.getToken()
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  }
+
+  /**
+   * 保存完整的认证信息
+   * @param token JWT Token
+   * @param userInfo 用户信息
+   * @param remember 是否记住登录
+   */
+  static saveAuthInfo(token: string, userInfo: UserInfo, remember: boolean = false): void {
+    this.saveToken(token)
+    this.saveUserInfo(userInfo)
+    this.saveRememberLogin(remember)
+  }
+
+  /**
+   * 获取完整的认证信息
+   * @returns 认证信息对象
+   */
+  static getAuthInfo() {
+    return {
+      token: this.getToken(),
+      userInfo: this.getUserInfo(),
+      rememberLogin: this.getRememberLogin(),
+      isLoggedIn: this.isLoggedIn(),
+    }
+  }
+}
diff --git a/src/views/ErrorPage.vue b/src/views/ErrorPage.vue
new file mode 100644
index 0000000..0d13909
--- /dev/null
+++ b/src/views/ErrorPage.vue
@@ -0,0 +1,451 @@
+<template>
+  <div class="error-page">
+    <!-- 错误内容容器 -->
+    <div class="error-container">
+      <!-- 错误图标和动画 -->
+      <div class="error-icon-wrapper">
+        <el-icon class="error-icon" size="120">
+          <component :is="getErrorIcon()" />
+        </el-icon>
+        <div class="error-decoration">
+          <div class="decoration-circle circle-1"></div>
+          <div class="decoration-circle circle-2"></div>
+          <div class="decoration-circle circle-3"></div>
+        </div>
+      </div>
+
+      <!-- 错误信息 -->
+      <div class="error-content">
+        <h1 class="error-title">{{ getErrorTitle() }}</h1>
+        <p class="error-message">{{ getErrorMessage() }}</p>
+        <p class="error-description">{{ getErrorDescription() }}</p>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="error-actions">
+        <el-button type="primary" size="large" @click="goHome" :icon="House"> 返回主页 </el-button>
+        <el-button size="large" @click="goBack" :icon="ArrowLeft"> 返回上一页 </el-button>
+        <el-button size="large" @click="refresh" :icon="Refresh"> 刷新页面 </el-button>
+      </div>
+
+      <!-- 帮助信息 -->
+      <div class="error-help">
+        <el-collapse>
+          <el-collapse-item title="需要帮助？" name="help">
+            <div class="help-content">
+              <p><strong>可能的解决方案：</strong></p>
+              <ul>
+                <li>检查网络连接是否正常</li>
+                <li>清除浏览器缓存和Cookie</li>
+                <li>尝试使用其他浏览器访问</li>
+                <li>联系系统管理员获取技术支持</li>
+              </ul>
+              <p><strong>联系方式：</strong></p>
+              <p>技术支持邮箱：support@restaurant-system.com</p>
+              <p>客服热线：400-123-4567</p>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+
+      <!-- 错误详情（开发模式显示） -->
+      <div v-if="showErrorDetails" class="error-details">
+        <el-card>
+          <template #header>
+            <span>错误详情</span>
+          </template>
+          <div class="error-info">
+            <p><strong>错误类型：</strong> {{ errorType }}</p>
+            <p><strong>错误代码：</strong> {{ errorCode }}</p>
+            <p><strong>时间戳：</strong> {{ errorTimestamp }}</p>
+            <p v-if="errorStack"><strong>错误堆栈：</strong></p>
+            <pre v-if="errorStack" class="error-stack">{{ errorStack }}</pre>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import {
+  Warning,
+  CircleClose,
+  WarnTriangleFilled,
+  House,
+  ArrowLeft,
+  Refresh,
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+const route = useRoute()
+
+// 错误类型定义
+type ErrorType = '404' | '403' | '500' | 'network' | 'auth' | 'unknown'
+
+// 响应式数据
+const errorType = ref<ErrorType>('unknown')
+const errorCode = ref<string>('')
+const errorMessage = ref<string>('')
+const errorStack = ref<string>('')
+const errorTimestamp = ref<string>(new Date().toLocaleString())
+const showErrorDetails = ref(import.meta.env.DEV) // 开发模式显示详情
+
+// 初始化错误信息
+onMounted(() => {
+  parseErrorFromQuery()
+})
+
+// 从路由查询参数解析错误信息
+const parseErrorFromQuery = () => {
+  const { type, code, message, stack } = route.query
+
+  errorType.value = (type as ErrorType) || 'unknown'
+  errorCode.value = (code as string) || ''
+  errorMessage.value = (message as string) || ''
+  errorStack.value = (stack as string) || ''
+}
+
+// 获取错误图标
+const getErrorIcon = () => {
+  switch (errorType.value) {
+    case '404':
+      return Warning
+    case '403':
+      return CircleClose
+    case '500':
+    case 'network':
+      return WarnTriangleFilled
+    case 'auth':
+      return CircleClose
+    default:
+      return Warning
+  }
+}
+
+// 获取错误标题
+const getErrorTitle = (): string => {
+  switch (errorType.value) {
+    case '404':
+      return '页面未找到'
+    case '403':
+      return '访问被拒绝'
+    case '500':
+      return '服务器错误'
+    case 'network':
+      return '网络连接失败'
+    case 'auth':
+      return '认证失败'
+    default:
+      return '发生错误'
+  }
+}
+
+// 获取错误消息
+const getErrorMessage = (): string => {
+  if (errorMessage.value) {
+    return errorMessage.value
+  }
+
+  switch (errorType.value) {
+    case '404':
+      return '抱歉，您访问的页面不存在'
+    case '403':
+      return '您没有权限访问此页面'
+    case '500':
+      return '服务器内部错误，请稍后重试'
+    case 'network':
+      return '网络连接失败，请检查您的网络设置'
+    case 'auth':
+      return '身份验证失败，请重新登录'
+    default:
+      return '系统发生未知错误，请稍后重试'
+  }
+}
+
+// 获取错误描述
+const getErrorDescription = (): string => {
+  switch (errorType.value) {
+    case '404':
+      return '请检查URL是否正确，或从导航菜单重新开始'
+    case '403':
+      return '如果您认为这是错误，请联系系统管理员'
+    case '500':
+      return '我们的技术团队已收到通知，正在解决此问题'
+    case 'network':
+      return '请检查网络连接后重试，或联系网络管理员'
+    case 'auth':
+      return '您的登录会话可能已过期，请重新登录'
+    default:
+      return '如果问题持续存在，请联系技术支持团队'
+  }
+}
+
+// 返回主页
+const goHome = () => {
+  router.push('/login').catch(() => {
+    window.location.href = '/login'
+  })
+}
+
+// 返回上一页
+const goBack = () => {
+  if (window.history.length > 1) {
+    router.back()
+  } else {
+    goHome()
+  }
+}
+
+// 刷新页面
+const refresh = () => {
+  window.location.reload()
+}
+</script>
+
+<style scoped lang="scss">
+.error-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.error-container {
+  max-width: 600px;
+  width: 100%;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  z-index: 2;
+}
+
+.error-icon-wrapper {
+  position: relative;
+  margin-bottom: 30px;
+
+  .error-icon {
+    color: #f56c6c;
+    animation: bounce 2s infinite;
+  }
+
+  .error-decoration {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+
+    .decoration-circle {
+      position: absolute;
+      border: 2px solid rgba(245, 108, 108, 0.2);
+      border-radius: 50%;
+      animation: pulse 3s infinite;
+
+      &.circle-1 {
+        width: 150px;
+        height: 150px;
+        top: -75px;
+        left: -75px;
+        animation-delay: 0s;
+      }
+
+      &.circle-2 {
+        width: 200px;
+        height: 200px;
+        top: -100px;
+        left: -100px;
+        animation-delay: 1s;
+      }
+
+      &.circle-3 {
+        width: 250px;
+        height: 250px;
+        top: -125px;
+        left: -125px;
+        animation-delay: 2s;
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+}
+
+.error-content {
+  margin-bottom: 30px;
+
+  .error-title {
+    font-size: 32px;
+    font-weight: 700;
+    color: #2c3e50;
+    margin: 0 0 15px 0;
+  }
+
+  .error-message {
+    font-size: 18px;
+    color: #7f8c8d;
+    margin: 0 0 10px 0;
+    line-height: 1.6;
+  }
+
+  .error-description {
+    font-size: 14px;
+    color: #95a5a6;
+    margin: 0;
+    line-height: 1.5;
+  }
+}
+
+.error-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+  margin-bottom: 30px;
+
+  .el-button {
+    min-width: 120px;
+  }
+}
+
+.error-help {
+  margin-bottom: 20px;
+  text-align: left;
+
+  .help-content {
+    padding: 15px 0;
+
+    ul {
+      margin: 10px 0;
+      padding-left: 20px;
+
+      li {
+        margin-bottom: 5px;
+        line-height: 1.5;
+      }
+    }
+
+    p {
+      margin: 8px 0;
+      line-height: 1.5;
+    }
+  }
+}
+
+.error-details {
+  .error-info {
+    text-align: left;
+    font-size: 14px;
+
+    p {
+      margin: 8px 0;
+      line-height: 1.5;
+    }
+
+    .error-stack {
+      background: #f8f9fa;
+      border: 1px solid #e9ecef;
+      border-radius: 4px;
+      padding: 10px;
+      font-size: 12px;
+      line-height: 1.4;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .error-container {
+    padding: 30px 20px;
+  }
+
+  .error-content {
+    .error-title {
+      font-size: 24px;
+    }
+
+    .error-message {
+      font-size: 16px;
+    }
+  }
+
+  .error-actions {
+    flex-direction: column;
+    align-items: center;
+
+    .el-button {
+      width: 100%;
+      max-width: 200px;
+    }
+  }
+
+  .error-icon-wrapper {
+    .error-icon {
+      font-size: 80px;
+    }
+
+    .error-decoration {
+      .decoration-circle {
+        &.circle-1 {
+          width: 100px;
+          height: 100px;
+          top: -50px;
+          left: -50px;
+        }
+
+        &.circle-2 {
+          width: 130px;
+          height: 130px;
+          top: -65px;
+          left: -65px;
+        }
+
+        &.circle-3 {
+          width: 160px;
+          height: 160px;
+          top: -80px;
+          left: -80px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/login/ChangePasswordPage.vue b/src/views/login/ChangePasswordPage.vue
new file mode 100644
index 0000000..c9e96a9
--- /dev/null
+++ b/src/views/login/ChangePasswordPage.vue
@@ -0,0 +1,421 @@
+<template>
+  <div class="change-password-container">
+    <el-card class="change-password-card" shadow="always">
+      <!-- 头部 -->
+      <div class="change-password-header">
+        <el-icon class="header-icon" size="48"><Lock /></el-icon>
+        <h1 class="title">修改密码</h1>
+        <p class="subtitle">为了您的账户安全，请定期更换密码</p>
+      </div>
+
+      <!-- 修改密码表单 -->
+      <el-form
+        ref="changePasswordFormRef"
+        :model="changePasswordForm"
+        :rules="changePasswordRules"
+        class="change-password-form"
+        label-position="top"
+      >
+        <!-- 当前密码 -->
+        <el-form-item label="当前密码" prop="oldPassword">
+          <el-input
+            v-model="changePasswordForm.oldPassword"
+            type="password"
+            placeholder="请输入当前密码"
+            size="large"
+            show-password
+            clearable
+            :prefix-icon="Lock"
+          />
+        </el-form-item>
+
+        <!-- 新密码 -->
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input
+            v-model="changePasswordForm.newPassword"
+            type="password"
+            placeholder="8-20位字符，必须包含字母和数字"
+            size="large"
+            show-password
+            clearable
+            :prefix-icon="Lock"
+            @input="handlePasswordChange"
+          />
+          <!-- 密码强度指示器 -->
+          <div class="password-strength" v-if="changePasswordForm.newPassword">
+            <div class="strength-label">密码强度：</div>
+            <div class="strength-indicator">
+              <div
+                class="strength-bar"
+                :class="{
+                  weak: passwordStrength === 'weak',
+                  medium: passwordStrength === 'medium',
+                  strong: passwordStrength === 'strong',
+                }"
+              ></div>
+              <span class="strength-text">{{ getStrengthText() }}</span>
+            </div>
+          </div>
+        </el-form-item>
+
+        <!-- 确认新密码 -->
+        <el-form-item label="确认新密码" prop="confirmPassword">
+          <el-input
+            v-model="changePasswordForm.confirmPassword"
+            type="password"
+            placeholder="请再次输入新密码"
+            size="large"
+            show-password
+            clearable
+            :prefix-icon="Lock"
+          />
+        </el-form-item>
+
+        <!-- 安全提示 -->
+        <el-alert title="安全提示" type="info" :closable="false" show-icon class="security-tips">
+          <template #default>
+            <ul>
+              <li>密码长度应为8-20个字符</li>
+              <li>必须同时包含字母和数字</li>
+              <li>建议包含特殊字符以提高安全性</li>
+              <li>不要使用过于简单的密码</li>
+            </ul>
+          </template>
+        </el-alert>
+
+        <!-- 操作按钮 -->
+        <div class="form-actions">
+          <el-button size="large" @click="handleCancel">取消</el-button>
+          <el-button
+            type="primary"
+            size="large"
+            :loading="changePasswordLoading"
+            @click="handleChangePassword"
+          >
+            {{ changePasswordLoading ? '修改中...' : '确认修改' }}
+          </el-button>
+        </div>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { Lock } from '@element-plus/icons-vue'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// 响应式数据
+const changePasswordFormRef = ref<FormInstance>()
+const changePasswordLoading = ref(false)
+const passwordStrength = ref<'weak' | 'medium' | 'strong'>('weak')
+
+// 修改密码表单数据
+const changePasswordForm = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+
+// 自定义验证函数
+const validateNewPassword = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入新密码'))
+  } else if (value === changePasswordForm.oldPassword) {
+    callback(new Error('新密码不能与当前密码相同'))
+  } else if (value.length < 8 || value.length > 20) {
+    callback(new Error('密码长度必须在8-20个字符之间'))
+  } else if (!/^(?=.*[a-zA-Z])(?=.*\d).*$/.test(value)) {
+    callback(new Error('密码必须同时包含字母和数字'))
+  } else {
+    callback()
+  }
+}
+
+const validateConfirmPassword = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请确认新密码'))
+  } else if (value !== changePasswordForm.newPassword) {
+    callback(new Error('两次输入的密码不一致'))
+  } else {
+    callback()
+  }
+}
+
+// 表单验证规则
+const changePasswordRules: FormRules = {
+  oldPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
+  newPassword: [{ required: true, validator: validateNewPassword, trigger: 'blur' }],
+  confirmPassword: [{ required: true, validator: validateConfirmPassword, trigger: 'blur' }],
+}
+
+// 密码强度检测
+const checkPasswordStrength = (password: string): 'weak' | 'medium' | 'strong' => {
+  if (!password) return 'weak'
+
+  let score = 0
+
+  // 长度检查
+  if (password.length >= 8) score += 1
+  if (password.length >= 12) score += 1
+
+  // 字符类型检查
+  if (/[a-z]/.test(password)) score += 1
+  if (/[A-Z]/.test(password)) score += 1
+  if (/\d/.test(password)) score += 1
+  if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score += 1
+
+  if (score <= 2) return 'weak'
+  if (score <= 4) return 'medium'
+  return 'strong'
+}
+
+// 密码强度文本
+const getStrengthText = () => {
+  switch (passwordStrength.value) {
+    case 'weak':
+      return '弱'
+    case 'medium':
+      return '中'
+    case 'strong':
+      return '强'
+    default:
+      return '弱'
+  }
+}
+
+// 处理密码变化
+const handlePasswordChange = () => {
+  passwordStrength.value = checkPasswordStrength(changePasswordForm.newPassword)
+}
+
+// 处理修改密码
+const handleChangePassword = async () => {
+  if (!changePasswordFormRef.value) return
+
+  try {
+    // 表单验证
+    await changePasswordFormRef.value.validate()
+
+    changePasswordLoading.value = true
+
+    // 调用修改密码API
+    const result = await authStore.changePassword({
+      oldPassword: changePasswordForm.oldPassword,
+      newPassword: changePasswordForm.newPassword,
+      confirmPassword: changePasswordForm.confirmPassword,
+    })
+
+    if (result.success) {
+      ElMessage.success(result.message)
+
+      // 提示用户重新登录
+      ElMessageBox.confirm('密码修改成功！为了账户安全，需要重新登录。', '密码修改成功', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '稍后登录',
+        type: 'success',
+      })
+        .then(() => {
+          // 清除认证信息并跳转登录
+          authStore.logout()
+          router.push('/login')
+        })
+        .catch(() => {
+          // 用户选择稍后登录，返回上一页
+          router.back()
+        })
+    } else {
+      ElMessage.error(result.message)
+    }
+  } catch (error) {
+    console.error('表单验证失败:', error)
+  } finally {
+    changePasswordLoading.value = false
+  }
+}
+
+// 取消修改
+const handleCancel = () => {
+  ElMessageBox.confirm('确定要取消修改密码吗？', '确认取消', {
+    confirmButtonText: '确定',
+    cancelButtonText: '继续修改',
+    type: 'warning',
+  })
+    .then(() => {
+      router.back()
+    })
+    .catch(() => {
+      // 用户选择继续修改
+    })
+}
+</script>
+
+<style scoped lang="scss">
+.change-password-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 20px;
+}
+
+.change-password-card {
+  width: 100%;
+  max-width: 500px;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.change-password-header {
+  text-align: center;
+  margin-bottom: 30px;
+
+  .header-icon {
+    color: #409eff;
+    margin-bottom: 15px;
+  }
+
+  .title {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #2c3e50;
+  }
+
+  .subtitle {
+    margin: 0;
+    color: #7f8c8d;
+    font-size: 14px;
+  }
+}
+
+.change-password-form {
+  .el-form-item {
+    margin-bottom: 20px;
+
+    :deep(.el-form-item__label) {
+      font-weight: 500;
+      color: #2c3e50;
+      margin-bottom: 5px;
+    }
+  }
+
+  .password-strength {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+
+    .strength-label {
+      color: #666;
+      margin-right: 8px;
+    }
+
+    .strength-indicator {
+      display: flex;
+      align-items: center;
+
+      .strength-bar {
+        width: 60px;
+        height: 4px;
+        border-radius: 2px;
+        margin-right: 8px;
+        background: #e0e0e0;
+        position: relative;
+        overflow: hidden;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          border-radius: 2px;
+          transition: all 0.3s ease;
+        }
+
+        &.weak::after {
+          width: 33%;
+          background: #f56c6c;
+        }
+
+        &.medium::after {
+          width: 66%;
+          background: #e6a23c;
+        }
+
+        &.strong::after {
+          width: 100%;
+          background: #67c23a;
+        }
+      }
+
+      .strength-text {
+        font-weight: 500;
+
+        &.weak {
+          color: #f56c6c;
+        }
+        &.medium {
+          color: #e6a23c;
+        }
+        &.strong {
+          color: #67c23a;
+        }
+      }
+    }
+  }
+
+  .security-tips {
+    margin-bottom: 25px;
+
+    ul {
+      margin: 0;
+      padding-left: 16px;
+
+      li {
+        margin-bottom: 4px;
+        font-size: 13px;
+        color: #666;
+      }
+    }
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+
+    .el-button {
+      min-width: 100px;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .change-password-card {
+    margin: 20px;
+    padding: 16px;
+  }
+
+  .change-password-header .title {
+    font-size: 20px;
+  }
+
+  .form-actions {
+    flex-direction: column-reverse;
+
+    .el-button {
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
new file mode 100644
index 0000000..b9ff317
--- /dev/null
+++ b/src/views/login/LoginPage.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="login-container">
+    <!-- 背景装饰 -->
+    <div class="login-background">
+      <div class="background-shape shape-1"></div>
+      <div class="background-shape shape-2"></div>
+      <div class="background-shape shape-3"></div>
+    </div>
+
+    <!-- 登录卡片 -->
+    <el-card class="login-card" shadow="always">
+      <!-- 头部Logo和标题 -->
+      <div class="login-header">
+        <img src="@/assets/image/logo.png" alt="Logo" class="logo" />
+        <h1 class="title">餐厅管理系统</h1>
+        <p class="subtitle">欢迎登录</p>
+      </div>
+
+      <!-- 用户类型选择器 -->
+      <el-tabs v-model="activeUserType" class="user-type-tabs" @tab-change="handleUserTypeChange">
+        <el-tab-pane label="客户登录" name="customer">
+          <el-icon><User /></el-icon>
+        </el-tab-pane>
+        <el-tab-pane label="商户登录" name="manager">
+          <el-icon><Shop /></el-icon>
+        </el-tab-pane>
+        <el-tab-pane label="管理员" name="admin">
+          <el-icon><Setting /></el-icon>
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 登录表单 -->
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
+        @submit.prevent="handleLogin"
+      >
+        <!-- 用户名输入 -->
+        <el-form-item prop="accountName">
+          <el-input
+            v-model="loginForm.accountName"
+            placeholder="请输入用户名"
+            size="large"
+            clearable
+            :prefix-icon="User"
+            @keyup.enter="handleLogin"
+          />
+        </el-form-item>
+
+        <!-- 密码输入 -->
+        <el-form-item prop="accountPassword">
+          <el-input
+            v-model="loginForm.accountPassword"
+            type="password"
+            placeholder="请输入密码"
+            size="large"
+            show-password
+            clearable
+            :prefix-icon="Lock"
+            @keyup.enter="handleLogin"
+          />
+        </el-form-item>
+
+        <!-- 记住登录和忘记密码 -->
+        <div class="login-options">
+          <el-checkbox v-model="rememberLogin">记住登录</el-checkbox>
+          <el-link type="primary" @click="handleForgotPassword">忘记密码？</el-link>
+        </div>
+
+        <!-- 登录按钮 -->
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            class="login-button"
+            :loading="loginLoading"
+            @click="handleLogin"
+          >
+            {{ loginLoading ? '登录中...' : '登录' }}
+          </el-button>
+        </el-form-item>
+
+        <!-- 注册链接 -->
+        <div class="register-link">
+          <span>还没有账号？</span>
+          <el-link type="primary" @click="goToRegister">立即注册</el-link>
+        </div>
+      </el-form>
+    </el-card>
+
+    <!-- 页脚信息 -->
+    <div class="login-footer">
+      <p>&copy; 2024 餐厅管理系统. All rights reserved.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { User, Lock, Shop, Setting } from '@element-plus/icons-vue'
+import { useAuthStore } from '@/stores/auth'
+import type { UserType } from '@/types/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// 响应式数据
+const loginFormRef = ref<FormInstance>()
+const activeUserType = ref<UserType>('customer')
+const loginLoading = ref(false)
+const rememberLogin = ref(false)
+
+// 登录表单数据
+const loginForm = reactive({
+  accountName: '',
+  accountPassword: '',
+})
+
+// 表单验证规则
+const loginRules: FormRules = {
+  accountName: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' },
+  ],
+  accountPassword: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' },
+  ],
+}
+
+// 用户类型切换
+const handleUserTypeChange = (type: UserType) => {
+  activeUserType.value = type
+  // 可以根据不同用户类型调整UI或验证规则
+}
+
+// 处理登录
+const handleLogin = async () => {
+  if (!loginFormRef.value) return
+
+  try {
+    // 表单验证
+    await loginFormRef.value.validate()
+
+    loginLoading.value = true
+
+    // 调用登录API
+    const result = await authStore.login({
+      accountName: loginForm.accountName,
+      accountPassword: loginForm.accountPassword,
+    })
+
+    if (result.success) {
+      ElMessage.success(result.message)
+
+      // 验证用户类型是否匹配
+      if (authStore.userType === activeUserType.value) {
+        // 跳转到对应的模块
+        const redirectPath = authStore.getRedirectPath()
+        router.push(redirectPath)
+      } else {
+        ElMessage.error('用户类型不匹配，请选择正确的登录类型')
+        authStore.logout()
+      }
+    } else {
+      ElMessage.error(result.message)
+    }
+  } catch (error) {
+    console.error('表单验证失败:', error)
+  } finally {
+    loginLoading.value = false
+  }
+}
+
+// 忘记密码
+const handleForgotPassword = () => {
+  ElMessageBox.alert('请联系系统管理员重置密码', '忘记密码', {
+    confirmButtonText: '确定',
+    type: 'info',
+  })
+}
+
+// 跳转注册页面
+const goToRegister = () => {
+  router.push('/register')
+}
+
+// 页面加载时初始化
+onMounted(() => {
+  // 如果已经登录，直接跳转
+  if (authStore.isAuthenticated) {
+    const redirectPath = authStore.getRedirectPath()
+    router.push(redirectPath)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.login-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  .background-shape {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    animation: float 6s ease-in-out infinite;
+
+    &.shape-1 {
+      width: 300px;
+      height: 300px;
+      top: 10%;
+      left: 10%;
+      animation-delay: 0s;
+    }
+
+    &.shape-2 {
+      width: 200px;
+      height: 200px;
+      top: 70%;
+      right: 15%;
+      animation-delay: 2s;
+    }
+
+    &.shape-3 {
+      width: 150px;
+      height: 150px;
+      bottom: 20%;
+      left: 20%;
+      animation-delay: 4s;
+    }
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.login-card {
+  width: 100%;
+  max-width: 400px;
+  z-index: 2;
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95);
+  border: none;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+
+  .logo {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 15px;
+  }
+
+  .title {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #2c3e50;
+  }
+
+  .subtitle {
+    margin: 0;
+    color: #7f8c8d;
+    font-size: 14px;
+  }
+}
+
+.user-type-tabs {
+  margin-bottom: 25px;
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+
+  :deep(.el-tabs__item) {
+    padding: 8px 20px;
+    font-size: 14px;
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+  }
+}
+
+.login-form {
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+
+  .login-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+    font-size: 14px;
+  }
+
+  .login-button {
+    width: 100%;
+    height: 45px;
+    font-size: 16px;
+    font-weight: 500;
+    border-radius: 8px;
+  }
+
+  .register-link {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: #7f8c8d;
+
+    .el-link {
+      margin-left: 5px;
+    }
+  }
+}
+
+.login-footer {
+  position: absolute;
+  bottom: 20px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  z-index: 2;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .login-card {
+    margin: 20px;
+    padding: 16px;
+  }
+
+  .login-header .title {
+    font-size: 20px;
+  }
+
+  .background-shape {
+    &.shape-1 {
+      width: 200px;
+      height: 200px;
+    }
+
+    &.shape-2 {
+      width: 150px;
+      height: 150px;
+    }
+
+    &.shape-3 {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/login/RegisterPage.vue b/src/views/login/RegisterPage.vue
new file mode 100644
index 0000000..c52c688
--- /dev/null
+++ b/src/views/login/RegisterPage.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="register-container">
+    <!-- 背景装饰 -->
+    <div class="register-background">
+      <div class="background-shape shape-1"></div>
+      <div class="background-shape shape-2"></div>
+      <div class="background-shape shape-3"></div>
+    </div>
+
+    <!-- 注册卡片 -->
+    <el-card class="register-card" shadow="always">
+      <!-- 头部 -->
+      <div class="register-header">
+        <img src="@/assets/image/logo.png" alt="Logo" class="logo" />
+        <h1 class="title">用户注册</h1>
+        <p class="subtitle">创建您的账号</p>
+      </div>
+
+      <!-- 注册表单 -->
+      <el-form
+        ref="registerFormRef"
+        :model="registerForm"
+        :rules="registerRules"
+        class="register-form"
+        label-position="top"
+      >
+        <!-- 用户名 -->
+        <el-form-item label="用户名" prop="accountName">
+          <el-input
+            v-model="registerForm.accountName"
+            placeholder="3-20位字符，支持字母、数字、下划线"
+            size="large"
+            clearable
+            :prefix-icon="User"
+          />
+        </el-form-item>
+
+        <!-- 密码 -->
+        <el-form-item label="密码" prop="accountPassword">
+          <el-input
+            v-model="registerForm.accountPassword"
+            type="password"
+            placeholder="8-20位字符，必须包含字母和数字"
+            size="large"
+            show-password
+            clearable
+            :prefix-icon="Lock"
+          />
+        </el-form-item>
+
+        <!-- 确认密码 -->
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="registerForm.confirmPassword"
+            type="password"
+            placeholder="请再次输入密码"
+            size="large"
+            show-password
+            clearable
+            :prefix-icon="Lock"
+          />
+        </el-form-item>
+
+        <!-- 手机号 -->
+        <el-form-item label="手机号码" prop="accountPhone">
+          <el-input
+            v-model="registerForm.accountPhone"
+            placeholder="请输入手机号（可选）"
+            size="large"
+            clearable
+            :prefix-icon="Phone"
+          />
+        </el-form-item>
+
+        <!-- 用户类型 -->
+        <el-form-item label="用户类型" prop="accountType">
+          <el-select
+            v-model="registerForm.accountType"
+            placeholder="请选择用户类型"
+            size="large"
+            style="width: 100%"
+          >
+            <el-option value="customer" label="客户">
+              <el-icon><User /></el-icon>
+              <span style="margin-left: 8px">客户</span>
+            </el-option>
+            <el-option value="manager" label="商户">
+              <el-icon><Shop /></el-icon>
+              <span style="margin-left: 8px">商户</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- 性别 -->
+        <el-form-item label="性别" prop="accountGender">
+          <el-radio-group v-model="registerForm.accountGender" size="large">
+            <el-radio value="male">男</el-radio>
+            <el-radio value="female">女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <!-- 用户协议 -->
+        <el-form-item prop="acceptTerms">
+          <el-checkbox v-model="registerForm.acceptTerms">
+            我已阅读并同意
+            <el-link type="primary" @click="showTerms">《用户服务协议》</el-link>
+            和
+            <el-link type="primary" @click="showPrivacy">《隐私政策》</el-link>
+          </el-checkbox>
+        </el-form-item>
+
+        <!-- 注册按钮 -->
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            class="register-button"
+            :loading="registerLoading"
+            @click="handleRegister"
+          >
+            {{ registerLoading ? '注册中...' : '立即注册' }}
+          </el-button>
+        </el-form-item>
+
+        <!-- 登录链接 -->
+        <div class="login-link">
+          <span>已有账号？</span>
+          <el-link type="primary" @click="goToLogin">立即登录</el-link>
+        </div>
+      </el-form>
+    </el-card>
+
+    <!-- 页脚 -->
+    <div class="register-footer">
+      <p>&copy; 2024 餐厅管理系统. All rights reserved.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { User, Lock, Phone, Shop } from '@element-plus/icons-vue'
+import { useAuthStore } from '@/stores/auth'
+import type { UserType, Gender } from '@/types/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// 响应式数据
+const registerFormRef = ref<FormInstance>()
+const registerLoading = ref(false)
+
+// 注册表单数据
+const registerForm = reactive({
+  accountName: '',
+  accountPassword: '',
+  confirmPassword: '',
+  accountPhone: '',
+  accountType: 'customer' as UserType,
+  accountGender: 'male' as Gender,
+  acceptTerms: false,
+})
+
+// 自定义验证函数
+const validateConfirmPassword = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== registerForm.accountPassword) {
+    callback(new Error('两次输入密码不一致'))
+  } else {
+    callback()
+  }
+}
+
+const validateTerms = (rule: any, value: any, callback: any) => {
+  if (!value) {
+    callback(new Error('请阅读并同意用户协议'))
+  } else {
+    callback()
+  }
+}
+
+// 表单验证规则
+const registerRules: FormRules = {
+  accountName: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' },
+  ],
+  accountPassword: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' },
+    {
+      pattern: /^(?=.*[a-zA-Z])(?=.*\d).*$/,
+      message: '密码必须同时包含字母和数字',
+      trigger: 'blur',
+    },
+  ],
+  confirmPassword: [{ required: true, validator: validateConfirmPassword, trigger: 'blur' }],
+  accountPhone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
+  accountType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
+  acceptTerms: [{ validator: validateTerms, trigger: 'change' }],
+}
+
+// 处理注册
+const handleRegister = async () => {
+  if (!registerFormRef.value) return
+
+  try {
+    // 表单验证
+    await registerFormRef.value.validate()
+
+    registerLoading.value = true
+
+    // 构建注册数据
+    const registerData = {
+      accountName: registerForm.accountName,
+      accountPassword: registerForm.accountPassword,
+      confirmPassword: registerForm.confirmPassword,
+      accountPhone: registerForm.accountPhone || undefined,
+      accountType: registerForm.accountType,
+      accountGender: registerForm.accountGender,
+    }
+
+    // 调用注册API
+    const result = await authStore.register(registerData)
+
+    if (result.success) {
+      ElMessage.success(result.message)
+      ElMessageBox.confirm('注册成功！是否立即登录？', '注册成功', {
+        confirmButtonText: '立即登录',
+        cancelButtonText: '稍后登录',
+        type: 'success',
+      })
+        .then(() => {
+          router.push('/login')
+        })
+        .catch(() => {
+          // 用户选择稍后登录
+        })
+    } else {
+      ElMessage.error(result.message)
+    }
+  } catch (error) {
+    console.error('表单验证失败:', error)
+  } finally {
+    registerLoading.value = false
+  }
+}
+
+// 显示用户协议
+const showTerms = () => {
+  ElMessageBox.alert('这里是用户服务协议内容...', '用户服务协议', {
+    confirmButtonText: '确定',
+    type: 'info',
+  })
+}
+
+// 显示隐私政策
+const showPrivacy = () => {
+  ElMessageBox.alert('这里是隐私政策内容...', '隐私政策', {
+    confirmButtonText: '确定',
+    type: 'info',
+  })
+}
+
+// 跳转登录页面
+const goToLogin = () => {
+  router.push('/login')
+}
+</script>
+
+<style scoped lang="scss">
+.register-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+  padding: 20px 0;
+}
+
+.register-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  .background-shape {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    animation: float 6s ease-in-out infinite;
+
+    &.shape-1 {
+      width: 300px;
+      height: 300px;
+      top: 10%;
+      left: 10%;
+      animation-delay: 0s;
+    }
+
+    &.shape-2 {
+      width: 200px;
+      height: 200px;
+      top: 70%;
+      right: 15%;
+      animation-delay: 2s;
+    }
+
+    &.shape-3 {
+      width: 150px;
+      height: 150px;
+      bottom: 20%;
+      left: 20%;
+      animation-delay: 4s;
+    }
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.register-card {
+  width: 100%;
+  max-width: 450px;
+  z-index: 2;
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95);
+  border: none;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.register-header {
+  text-align: center;
+  margin-bottom: 25px;
+
+  .logo {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 15px;
+  }
+
+  .title {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #2c3e50;
+  }
+
+  .subtitle {
+    margin: 0;
+    color: #7f8c8d;
+    font-size: 14px;
+  }
+}
+
+.register-form {
+  .el-form-item {
+    margin-bottom: 18px;
+
+    :deep(.el-form-item__label) {
+      font-weight: 500;
+      color: #2c3e50;
+      margin-bottom: 5px;
+    }
+  }
+
+  .register-button {
+    width: 100%;
+    height: 45px;
+    font-size: 16px;
+    font-weight: 500;
+    border-radius: 8px;
+  }
+
+  .login-link {
+    text-align: center;
+    margin-top: 15px;
+    font-size: 14px;
+    color: #7f8c8d;
+
+    .el-link {
+      margin-left: 5px;
+    }
+  }
+}
+
+.register-footer {
+  position: fixed;
+  bottom: 20px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  z-index: 2;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .register-card {
+    margin: 20px;
+    padding: 16px;
+  }
+
+  .register-header .title {
+    font-size: 20px;
+  }
+
+  .background-shape {
+    &.shape-1 {
+      width: 200px;
+      height: 200px;
+    }
+
+    &.shape-2 {
+      width: 150px;
+      height: 150px;
+    }
+
+    &.shape-3 {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/login/components/UserTypeSelector.vue b/src/views/login/components/UserTypeSelector.vue
new file mode 100644
index 0000000..8a81999
--- /dev/null
+++ b/src/views/login/components/UserTypeSelector.vue
@@ -0,0 +1,199 @@
+<template>
+  <!-- 用户类型选择器组件 -->
+  <div class="user-type-selector">
+    <el-radio-group
+      v-model="selectedType"
+      size="large"
+      class="type-radio-group"
+      @change="handleTypeChange"
+    >
+      <!-- 客户选项 -->
+      <el-radio-button value="customer" class="type-option customer-option">
+        <div class="option-content">
+          <el-icon class="option-icon"><User /></el-icon>
+          <span class="option-text">客户登录</span>
+          <p class="option-desc">浏览餐厅，下单用餐</p>
+        </div>
+      </el-radio-button>
+
+      <!-- 商户选项 -->
+      <el-radio-button value="manager" class="type-option merchant-option">
+        <div class="option-content">
+          <el-icon class="option-icon"><Shop /></el-icon>
+          <span class="option-text">商户登录</span>
+          <p class="option-desc">管理餐厅，处理订单</p>
+        </div>
+      </el-radio-button>
+
+      <!-- 管理员选项 -->
+      <el-radio-button value="admin" class="type-option admin-option">
+        <div class="option-content">
+          <el-icon class="option-icon"><Setting /></el-icon>
+          <span class="option-text">管理员</span>
+          <p class="option-desc">系统管理，数据统计</p>
+        </div>
+      </el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { User, Shop, Setting } from '@element-plus/icons-vue'
+import type { UserType } from '@/types/auth'
+
+// 定义组件属性
+interface Props {
+  modelValue: UserType
+}
+
+// 定义组件事件
+interface Emits {
+  (e: 'update:modelValue', value: UserType): void
+  (e: 'change', value: UserType): void
+}
+
+// 接收属性和事件
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 响应式数据
+const selectedType = ref<UserType>(props.modelValue)
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedType.value = newValue
+  },
+)
+
+// 处理类型变化
+const handleTypeChange = (value: UserType) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
+
+<style scoped lang="scss">
+.user-type-selector {
+  margin-bottom: 20px;
+}
+
+.type-radio-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  :deep(.el-radio-button) {
+    width: 100%;
+    margin: 0;
+
+    .el-radio-button__inner {
+      width: 100%;
+      padding: 0;
+      border: 2px solid #e4e7ed;
+      border-radius: 12px;
+      background: #fff;
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: #409eff;
+        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+      }
+    }
+
+    &.is-active .el-radio-button__inner {
+      border-color: #409eff;
+      background: linear-gradient(135deg, #409eff 0%, #667eea 100%);
+      color: #fff;
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+    }
+  }
+}
+
+.type-option {
+  .option-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+    text-align: center;
+
+    .option-icon {
+      font-size: 28px;
+      margin-bottom: 8px;
+      color: #409eff;
+    }
+
+    .option-text {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 4px;
+      color: #2c3e50;
+    }
+
+    .option-desc {
+      font-size: 12px;
+      color: #7f8c8d;
+      margin: 0;
+      line-height: 1.4;
+    }
+  }
+
+  &.is-active .option-content {
+    .option-icon,
+    .option-text,
+    .option-desc {
+      color: #fff;
+    }
+  }
+}
+
+// 不同用户类型的主题色
+.customer-option {
+  &.is-active :deep(.el-radio-button__inner) {
+    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
+    border-color: #67c23a;
+  }
+}
+
+.merchant-option {
+  &.is-active :deep(.el-radio-button__inner) {
+    background: linear-gradient(135deg, #e6a23c 0%, #f7ba2a 100%);
+    border-color: #e6a23c;
+  }
+}
+
+.admin-option {
+  &.is-active :deep(.el-radio-button__inner) {
+    background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
+    border-color: #f56c6c;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .type-radio-group {
+    gap: 8px;
+  }
+
+  .type-option .option-content {
+    padding: 12px;
+
+    .option-icon {
+      font-size: 24px;
+      margin-bottom: 6px;
+    }
+
+    .option-text {
+      font-size: 14px;
+    }
+
+    .option-desc {
+      font-size: 11px;
+    }
+  }
+}
+</style>
diff --git a/登录系统测试指南.md b/登录系统测试指南.md
new file mode 100644
index 0000000..bf92453
--- /dev/null
+++ b/登录系统测试指南.md
@@ -0,0 +1,292 @@
+# 🧪 餐厅管理系统登录模块测试指南
+
+## 📋 系统概述
+
+已成功创建完整的登录系统，包含以下核心功能：
+
+- 用户登录（支持三种用户类型）
+- 用户注册
+- 密码修改
+- 路由守卫和权限控制
+- 统一错误处理
+- Axios请求拦截器
+
+## 🎯 已实现的功能模块
+
+### 1. 认证页面
+
+- ✅ **登录页面** (`/login`) - 支持客户/商户/管理员三种类型登录
+- ✅ **注册页面** (`/register`) - 完整的用户注册流程
+- ✅ **修改密码页面** (`/change-password`) - 安全的密码修改功能
+- ✅ **错误页面** (`/error`) - 统一的错误处理页面
+
+### 2. 路由系统
+
+- ✅ **路由守卫** - 自动检查登录状态和权限
+- ✅ **权限控制** - 根据用户类型限制访问
+- ✅ **自动重定向** - 登录后跳转到对应模块
+
+### 3. 状态管理
+
+- ✅ **Pinia Store** - 统一的认证状态管理
+- ✅ **本地存储** - Token和用户信息持久化
+- ✅ **状态同步** - 页面刷新后状态恢复
+
+### 4. 网络请求
+
+- ✅ **Axios拦截器** - 自动添加认证头
+- ✅ **错误处理** - 统一处理HTTP错误
+- ✅ **Token管理** - 自动Token验证和清理
+
+## 🔍 测试步骤
+
+### 基础功能测试
+
+#### 1. 访问登录页面
+
+```
+访问地址: http://localhost:5173
+预期结果: 自动重定向到 /login 页面
+```
+
+#### 2. 测试用户类型选择
+
+- 点击不同的用户类型标签（客户/商户/管理员）
+- 验证UI界面切换正常
+
+#### 3. 测试表单验证
+
+- **用户名验证**：
+
+  - 输入少于3个字符 → 显示错误提示
+  - 输入特殊字符 → 显示错误提示
+  - 输入正确格式 → 验证通过
+
+- **密码验证**：
+  - 输入少于8个字符 → 显示错误提示
+  - 输入纯数字或纯字母 → 显示错误提示
+  - 输入包含字母和数字 → 验证通过
+
+#### 4. 测试注册功能
+
+```
+访问地址: http://localhost:5173/register
+测试数据:
+- 用户名: testuser123
+- 密码: password123
+- 确认密码: password123
+- 手机号: 13812345678
+- 用户类型: customer
+- 性别: male
+```
+
+#### 5. 测试登录功能
+
+使用API文档中的示例数据进行登录测试：
+
+```
+用户名: zhangsan
+密码: password123
+用户类型: customer
+```
+
+### 路由权限测试
+
+#### 1. 未登录状态测试
+
+- 直接访问 `/admin` → 应跳转到错误页面
+- 直接访问 `/merchant` → 应跳转到错误页面
+- 直接访问 `/user` → 应跳转到错误页面
+
+#### 2. 权限控制测试
+
+- 客户身份登录后访问 `/admin` → 应显示权限不足错误
+- 商户身份登录后访问 `/admin` → 应显示权限不足错误
+- 管理员身份登录后 → 可以访问所有模块
+
+#### 3. 自动重定向测试
+
+- 客户登录成功 → 自动跳转到 `/user`
+- 商户登录成功 → 自动跳转到 `/merchant`
+- 管理员登录成功 → 自动跳转到 `/admin`
+
+### 错误处理测试
+
+#### 1. 网络错误测试
+
+- 关闭后端服务器
+- 尝试登录 → 应跳转到网络错误页面
+
+#### 2. 认证错误测试
+
+- 使用错误的用户名/密码 → 显示登录失败消息
+- Token过期 → 自动跳转到认证错误页面
+
+#### 3. 404错误测试
+
+- 访问不存在的路径 → 应跳转到404错误页面
+
+## 🔧 API接口测试
+
+### 1. 登录接口测试
+
+```bash
+curl -X POST http://localhost:8080/api/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{
+    "accountName": "zhangsan",
+    "accountPassword": "password123"
+  }'
+```
+
+### 2. 注册接口测试
+
+```bash
+curl -X POST http://localhost:8080/api/auth/register \
+  -H "Content-Type: application/json" \
+  -d '{
+    "accountName": "testuser123",
+    "accountPassword": "password123",
+    "confirmPassword": "password123",
+    "accountPhone": "13812345678",
+    "accountType": "customer",
+    "accountGender": "male"
+  }'
+```
+
+### 3. 获取当前用户接口测试
+
+```bash
+curl -X GET http://localhost:8080/api/auth/current-user \
+  -H "Authorization: Bearer YOUR_TOKEN_HERE"
+```
+
+## 🐛 常见问题排查
+
+### 1. 页面无法访问
+
+- 检查开发服务器是否启动：`npm run dev`
+- 检查端口是否被占用
+- 检查控制台是否有JavaScript错误
+
+### 2. 登录失败
+
+- 确认后端服务器运行在 `http://localhost:8080`
+- 检查API接口是否可访问
+- 查看浏览器开发者工具的Network标签
+
+### 3. 权限问题
+
+- 检查用户类型是否正确
+- 确认Token是否正确保存在localStorage
+- 验证路由守卫配置
+
+### 4. 样式问题
+
+- 确认Element Plus正确安装和导入
+- 检查CSS样式是否正确加载
+- 验证图标组件是否正确注册
+
+## 📱 响应式设计测试
+
+### 移动端测试
+
+- 使用Chrome开发者工具切换到移动设备视图
+- 测试不同屏幕尺寸下的页面布局
+- 验证触摸操作的可用性
+
+### 平板端测试
+
+- 测试中等尺寸屏幕的适配
+- 验证表单元素的布局
+
+## 🔒 安全性测试
+
+### 1. XSS防护测试
+
+- 在表单中输入脚本代码
+- 验证是否被正确转义
+
+### 2. Token安全测试
+
+- 检查Token是否正确存储
+- 验证Token过期处理
+- 测试退出登录后Token清理
+
+### 3. 路由安全测试
+
+- 尝试直接访问受保护的路由
+- 验证权限检查是否生效
+
+## 📊 性能测试
+
+### 1. 页面加载速度
+
+- 测试首屏加载时间
+- 验证资源懒加载是否正常
+
+### 2. 网络请求优化
+
+- 检查是否有重复请求
+- 验证请求拦截器性能
+
+## 🎨 用户体验测试
+
+### 1. 交互反馈
+
+- 点击按钮时的加载状态
+- 表单验证的即时反馈
+- 错误消息的友好提示
+
+### 2. 视觉设计
+
+- 颜色搭配和对比度
+- 字体大小和可读性
+- 图标和按钮的直观性
+
+## 📝 测试清单
+
+- [ ] 登录页面正常显示
+- [ ] 用户类型选择器工作正常
+- [ ] 表单验证规则生效
+- [ ] 注册功能完整可用
+- [ ] 登录成功后正确跳转
+- [ ] 路由守卫正确拦截
+- [ ] 权限控制按预期工作
+- [ ] 错误页面正确显示
+- [ ] Token自动添加到请求头
+- [ ] 网络错误正确处理
+- [ ] 移动端适配良好
+- [ ] 密码修改功能正常
+- [ ] 退出登录清理状态
+
+## 🚀 部署前检查
+
+1. **代码质量**
+
+   - 运行 `npm run type-check` 检查TypeScript类型
+   - 运行 `npm run format` 格式化代码
+
+2. **构建测试**
+
+   - 运行 `npm run build` 构建生产版本
+   - 检查构建产物是否正常
+
+3. **环境配置**
+   - 确认API地址配置正确
+   - 检查生产环境的安全设置
+
+---
+
+## 🎯 总结
+
+登录系统已完整实现，包含了现代Web应用所需的所有核心功能：
+
+- ✅ 完整的用户认证流程
+- ✅ 细粒度的权限控制
+- ✅ 优雅的错误处理
+- ✅ 现代化的UI设计
+- ✅ 良好的用户体验
+- ✅ 安全的Token管理
+
+系统已准备好投入使用！🎉
diff --git a/登录系统设计方案.md b/登录系统设计方案.md
new file mode 100644
index 0000000..953c5b0
--- /dev/null
+++ b/登录系统设计方案.md
@@ -0,0 +1,251 @@
+# 🏗️ 餐厅管理系统登录模块设计方案
+
+## 📊 系统架构图
+
+```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)
+
+这个设计方案提供了完整的登录系统架构，包含了认证、授权、安全防护等所有必要功能。方案采用模块化设计，便于维护和扩展。