sdz/ks-app-employment-service

Template

Fork 0

Files

冯辉 d9c1f83693 微信授权登录功能开发联调

2025-10-20 11:43:44 +08:00

7.8 KiB

Raw Blame History

微信授权登录功能说明

功能概述

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

主要功能点

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

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

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

2. 登录弹窗功能

弹窗特性

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

弹窗内容

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

3. 登录流程

微信小程序登录流程

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

H5/App登录流程

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

测试登录流程（仅开发环境）

用户点击"测试账号登录"按钮
使用测试账号密码登录
后续流程同上

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() - 关闭弹窗

使用示例

<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 中添加了统一的登录检查函数：

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

3. 点击事件处理

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

// 处理附近工作点击
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 函数：

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
请求参数:

微信小程序

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

H5/App

{
  "code": "string"  // 微信登录凭证
}

返回数据:

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

2. 获取用户信息接口

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