ks-app-employment-service/docs/微信授权登录功能说明.md

# 微信授权登录功能说明

## 功能概述

本次开发实现了微信授权登录功能，当用户点击首页的特定功能时，会检查用户是否已登录，如果未登录则弹出授权弹窗，而不是直接跳转到登录页面。

## 主要功能点

### 1. 需要登录验证的功能入口

以下功能在点击时会进行登录验证：

- **附近工作** - 点击后跳转到附近工作列表页
- **九宫格服务功能** - 包含9个服务项：
  - 服务指导
  - 事业单位招录
  - 简历制作
  - 劳动政策指引
  - 技能培训信息
  - 技能评价指引
  - 题库和考试
  - 素质测评
  - AI智能面试
- **职位列表** - 点击任意职位卡片查看详情

### 2. 登录弹窗功能

#### 弹窗特性
- 使用 `uni-popup` 组件实现弹窗效果
- 弹窗居中显示，支持关闭按钮
- 不可点击遮罩关闭，确保用户必须做出选择

#### 弹窗内容
- **Logo和标题** - 显示应用logo和欢迎信息
- **授权说明** - 列出三个要点：
  - 保护您的个人信息安全
  - 为您推荐更合适的岗位
  - 享受完整的就业服务
- **授权按钮**：
  - 微信小程序：使用 `open-type="getPhoneNumber"` 获取手机号
  - H5/App：使用微信登录接口
  - 测试登录按钮（仅H5/App环境显示）
- **用户协议** - 显示用户协议和隐私政策链接

### 3. 登录流程

#### 微信小程序登录流程
1. 用户点击"微信授权登录"按钮
2. 触发微信小程序的手机号授权
3. 获取到 `code`、`encryptedData`、`iv`
4. 调用后端 `/app/wxLogin` 接口
5. 后端返回 `token`
6. 存储 `token` 并获取用户信息
7. 如果用户信息不完整，跳转到完善信息页面
8. 关闭弹窗，继续用户之前的操作

#### H5/App登录流程
1. 用户点击"微信授权登录"按钮
2. 调用 `uni.login` 获取微信授权 `code`
3. 调用后端 `/app/wxLogin` 接口
4. 后续流程同上

#### 测试登录流程（仅开发环境）
1. 用户点击"测试账号登录"按钮
2. 使用测试账号密码登录
3. 后续流程同上

### 4. 登录状态管理

#### 状态恢复
- 应用启动时自动从本地缓存恢复用户信息
- 验证 `token` 是否有效
- 如果 `token` 失效，清除缓存但不跳转登录页

#### 状态检查
- 使用 `checkLogin()` 函数统一检查登录状态
- 检查 `token` 是否存在
- 检查 `hasLogin` 状态
- 如果未登录，自动打开授权弹窗

## 文件结构

```
ks-app-employment-service/
├── components/
│   └── WxAuthLogin/
│       └── WxAuthLogin.vue         # 微信授权登录弹窗组件
├── pages/
│   └── index/
│       └── components/
│           └── index-one.vue       # 首页组件（已修改）
├── stores/
│   └── useUserStore.js             # 用户状态管理（已修改）
├── App.vue                         # 应用入口（已修改）
└── docs/
    └── 微信授权登录功能说明.md     # 本文档
```

## 核心代码说明

### 1. WxAuthLogin.vue 组件

这是一个可复用的微信授权登录弹窗组件，提供以下接口：

**Props**
- 无

**Events**
- `success` - 登录成功时触发
- `cancel` - 取消登录时触发

**Methods**
- `open()` - 打开弹窗
- `close()` - 关闭弹窗

**使用示例**
```vue
<template>
  <WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess" />
</template>

<script setup>
import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';

const wxAuthLoginRef = ref(null);

const handleLoginSuccess = () => {
  console.log('登录成功');
  // 执行登录后的操作
};

// 打开登录弹窗
const showLogin = () => {
  wxAuthLoginRef.value?.open();
};
</script>
```

### 2. 登录检查函数

在 `index-one.vue` 中添加了统一的登录检查函数：

```javascript
// 登录检查函数
const checkLogin = () => {
    const tokenValue = uni.getStorageSync('token') || '';
    if (!tokenValue || !hasLogin.value) {
        // 未登录，打开授权弹窗
        wxAuthLoginRef.value?.open();
        return false;
    }
    return true;
};
```

### 3. 点击事件处理

所有需要登录的功能都使用统一的检查逻辑：

```javascript
// 处理附近工作点击
const handleNearbyClick = () => {
    if (checkLogin()) {
        navTo('/pages/nearby/nearby');
    }
};

// 处理服务功能点击
const handleServiceClick = (serviceType) => {
    if (checkLogin()) {
        navToService(serviceType);
    }
};

// 处理职位详情点击
function nextDetail(job) {
    if (checkLogin()) {
        // 记录岗位类型，用作数据分析
        if (job.jobCategory) {
            const recordData = recommedIndexDb.JobParameter(job);
            recommedIndexDb.addRecord(recordData);
        }
        navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
    }
}
```

### 4. 状态管理优化

在 `useUserStore.js` 中优化了 `logOut` 函数：

```javascript
const logOut = (redirect = true) => {
    hasLogin.value = false;
    token.value = ''
    resume.value = {}
    userInfo.value = {}
    role.value = {}
    uni.removeStorageSync('userInfo')
    uni.removeStorageSync('token')
    
    // 只有在明确需要跳转时才跳转到登录页
    if (redirect) {
        uni.redirectTo({
            url: '/pages/login/login',
        });
    }
}
```

## 后端接口要求

### 1. 微信登录接口

**接口地址**: `/app/appLogin`  
**请求方法**: `POST`  
**请求参数**:

#### 微信小程序
```json
{
  "code": "string",           // 微信登录凭证
  "encryptedData": "string",  // 加密数据
  "iv": "string"              // 加密算法初始向量
}
```

#### H5/App
```json
{
  "code": "string"  // 微信登录凭证
}
```

**返回数据**:
```json
{
  "token": "string",    // 用户token
  "msg": "string",      // 返回消息
  "code": 200          // 状态码
}
```

### 2. 获取用户信息接口

**接口地址**: `/app/user/resume`  
**请求方法**: `GET`  
**请求头**: `Authorization: Bearer {token}`

**返回数据**:
```json
{
  "code": 200,
  "data": {
    "name": "string",
    "phone": "string",
    "jobTitle": ["string"],
    "jobTitleId": "string",
    // ... 其他用户信息
  }
}
```

## 注意事项

1. **小程序配置**
   - 需要在微信小程序后台配置服务器域名
   - 需要申请手机号授权权限

2. **H5配置**
   - 需要配置微信公众号的授权回调域名
   - 需要引入微信JSSDK

3. **安全性**
   - Token存储在本地缓存中，注意加密
   - 敏感操作前需要重新验证token有效性

4. **用户体验**
   - 登录弹窗不可通过点击遮罩关闭，确保用户必须做出选择
   - 提供测试登录按钮方便开发调试
   - 登录成功后自动刷新数据

5. **兼容性**
   - 使用条件编译确保在不同平台上正常运行
   - 小程序、H5、App使用不同的登录逻辑

## 测试建议

### 功能测试
1. 未登录状态点击"附近工作"，应弹出登录弹窗
2. 未登录状态点击九宫格任意服务，应弹出登录弹窗
3. 未登录状态点击职位列表，应弹出登录弹窗
4. 登录成功后，能够正常访问所有功能
5. 关闭登录弹窗后，不会自动跳转到登录页

### 登录流程测试
1. 微信小程序：测试手机号授权流程
2. H5：测试微信网页授权流程
3. 测试账号登录功能（开发环境）
4. 测试登录失败的错误提示
5. 测试用户取消授权的处理

### 状态管理测试
1. 测试应用重启后登录状态的恢复
2. 测试token失效后的处理
3. 测试退出登录功能
4. 测试多次登录的状态切换

## 更新日志

### v1.0.0 (2024-10-20)
- 创建微信授权登录弹窗组件
- 添加登录状态检查逻辑
- 优化用户状态管理
- 更新首页各功能的登录验证
- 完善登录流程和错误处理

## 开发者
- 开发时间: 2024-10-20
- 涉及模块: 登录模块、首页模块、用户状态管理