# 银行管理系统小程序 - 登录登出功能指南

## 功能概述

银行管理系统小程序已完善了登录和登出功能，包括：

- 用户登录验证
- 记住用户名功能
- 自动登录状态检查
- 安全登出
- 全局认证状态管理

## 文件结构

### 核心文件

```
bank_mini_program/
├── utils/
│   └── auth.js                    # 认证工具类
├── services/
│   ├── apiService.js             # API服务
│   └── authService.js            # 认证服务
├── pages/
│   ├── login/
│   │   ├── login.js              # 登录页面逻辑
│   │   ├── login.wxml            # 登录页面结构
│   │   └── login.wxss            # 登录页面样式
│   └── profile/
│       ├── profile.js            # 个人中心页面逻辑
│       ├── profile.wxml          # 个人中心页面结构
│       └── profile.wxss          # 个人中心页面样式
└── app.js                        # 应用入口，包含全局认证管理
```

## 功能详解

### 1. 登录功能

#### 登录页面特性
- **用户名密码输入**：支持用户名和密码登录
- **记住我功能**：可选择记住用户名，下次自动填充
- **快速登录**：提供测试用的快速登录按钮
- **表单验证**：输入验证和错误提示
- **加载状态**：登录过程中的加载提示

#### 登录流程
1. 用户输入用户名和密码
2. 点击登录按钮
3. 调用 `authService.login()` 进行API验证
4. 成功后保存token和用户信息到本地存储
5. 设置全局用户信息
6. 跳转到首页

#### 代码示例
```javascript
// 登录处理
async handleLogin() {
  const { username, password } = this.data;
  
  try {
    const response = await authService.login(username, password);
    
    if (response && response.success) {
      // 保存认证信息
      auth.setToken(response.token);
      auth.setUser(response.user);
      
      // 设置全局状态
      const app = getApp();
      if (app && app.login) {
        app.login(response.user);
      }
      
      // 跳转到首页
      wx.reLaunch({
        url: '/pages/index/index'
      });
    }
  } catch (error) {
    console.error('登录失败:', error);
  }
}
```

### 2. 登出功能

#### 登出页面特性
- **确认对话框**：登出前显示确认提示
- **API调用**：调用后端登出接口
- **本地清理**：清除本地存储的认证信息
- **全局状态更新**：更新应用的全局认证状态

#### 登出流程
1. 用户点击退出登录按钮
2. 显示确认对话框
3. 确认后调用 `authService.logout()` API
4. 清除本地存储的token和用户信息
5. 更新全局认证状态
6. 跳转到登录页面

#### 代码示例
```javascript
// 登出处理
async handleLogout() {
  try {
    // 调用登出API
    await authService.logout();
    
    // 清除本地认证信息
    auth.clearAuth();
    
    // 更新全局状态
    const app = getApp();
    if (app && app.logout) {
      app.logout();
    }
    
    // 跳转到登录页
    wx.reLaunch({
      url: '/pages/login/login'
    });
  } catch (error) {
    console.error('登出失败:', error);
  }
}
```

### 3. 认证状态管理

#### 全局认证检查
所有需要认证的页面都会在 `onLoad` 和 `onShow` 时检查认证状态：

```javascript
onLoad() {
  // 检查认证状态
  if (!auth.isAuthenticated()) {
    wx.reLaunch({
      url: '/pages/login/login'
    });
    return;
  }
  
  // 继续页面逻辑
  this.loadData();
}
```

#### 认证工具类方法
```javascript
// 检查是否已认证
auth.isAuthenticated()

// 获取用户信息
auth.getUser()

// 获取token
auth.getToken()

// 设置用户信息
auth.setUser(userInfo)

// 设置token
auth.setToken(token)

// 清除所有认证信息
auth.clearAuth()
```

### 4. 记住用户名功能

#### 功能说明
- 用户可以选择"记住我"选项
- 记住的用户名会保存到本地存储
- 下次打开登录页面时自动填充用户名

#### 实现代码
```javascript
// 切换记住我
onRememberMeChange(e) {
  this.setData({
    rememberMe: e.detail.value
  });
}

// 保存/清除用户名
if (rememberMe) {
  wx.setStorageSync('remembered_username', username);
} else {
  wx.removeStorageSync('remembered_username');
}
```

## 使用说明

### 1. 登录
1. 打开小程序
2. 如果未登录，会自动跳转到登录页面
3. 输入用户名和密码
4. 可选择"记住我"选项
5. 点击"登录"按钮

### 2. 登出
1. 进入个人中心页面
2. 点击"退出登录"按钮
3. 确认退出操作
4. 自动跳转到登录页面

### 3. 自动登录检查
- 每次打开需要认证的页面时，系统会自动检查登录状态
- 如果未登录，会自动跳转到登录页面
- 登录后会自动跳转回原页面

## 测试

### 测试文件
运行 `test-auth.js` 可以测试认证功能：

```javascript
// 在微信开发者工具中运行
const auth = require('./utils/auth.js');

// 测试认证状态
console.log('是否已认证:', auth.isAuthenticated());
```

### 测试步骤
1. 打开微信开发者工具
2. 导入银行管理系统小程序项目
3. 在控制台运行测试脚本
4. 测试登录和登出功能

## 注意事项

1. **API接口**：确保后端API接口 `/bank/api/auth/login` 和 `/bank/api/auth/logout` 正常工作
2. **Token管理**：Token会自动添加到API请求头中
3. **错误处理**：所有认证相关的错误都有适当的错误提示
4. **安全性**：敏感信息存储在微信小程序的本地存储中
5. **兼容性**：支持微信小程序的所有版本

## 故障排除

### 常见问题

1. **登录失败**
   - 检查网络连接
   - 确认用户名密码正确
   - 查看控制台错误信息

2. **自动跳转问题**
   - 检查页面路径是否正确
   - 确认认证状态检查逻辑

3. **记住用户名不工作**
   - 检查本地存储权限
   - 确认存储键名正确

4. **登出后仍显示已登录**
   - 检查 `auth.clearAuth()` 是否被调用
   - 确认全局状态是否正确更新

### 调试方法

1. 在微信开发者工具中查看控制台日志
2. 检查本地存储中的数据
3. 使用 `auth.isAuthenticated()` 检查认证状态
4. 查看网络请求是否成功

## 更新日志

- **v1.0.0** (2024-01-15)
  - 初始版本
  - 实现基础登录登出功能
  - 添加记住用户名功能
  - 实现全局认证状态管理
  - 添加页面级认证检查
