From d9c1f836938e144d60743a973237293d1f362d12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=AF=E8=BE=89?= <13935151924@163.com> Date: Mon, 20 Oct 2025 11:43:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E6=8E=88=E6=9D=83=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.vue | 34 ++- components/wxAuthLogin/WxAuthLogin.vue | 386 +++++++++++++++++++++++++ docs/微信授权登录功能说明.md | 321 ++++++++++++++++++++ pages/index/components/index-one.vue | 68 +++-- stores/useUserStore.js | 16 +- 5 files changed, 784 insertions(+), 41 deletions(-) create mode 100644 components/wxAuthLogin/WxAuthLogin.vue create mode 100644 docs/微信授权登录功能说明.md diff --git a/App.vue b/App.vue index 816483e..67bc3c0 100644 --- a/App.vue +++ b/App.vue @@ -11,24 +11,26 @@ onLaunch((options) => { useDictStore().getDictData(); // uni.hideTabBar(); - // 登录 - let token = uni.getStorageSync('token') || ''; // 同步获取 缓存信息 - if (token) { - useUserStore() - .loginSetToken(token) - .then(() => { - $api.msg('登录成功'); - }) - .catch(() => { - uni.redirectTo({ - url: '/pages/login/login', + // 尝试从缓存恢复用户信息 + const restored = useUserStore().restoreUserInfo(); + + if (restored) { + // 如果成功恢复用户信息,验证token是否有效 + let token = uni.getStorageSync('token') || ''; + if (token) { + useUserStore() + .loginSetToken(token) + .then(() => { + console.log('用户登录状态已恢复'); + }) + .catch(() => { + // token无效,清除缓存(不跳转登录页) + console.log('token已过期,需要重新登录'); + useUserStore().logOut(false); }); - }); - } else { - // uni.redirectTo({ - // url: '/pages/login/login', - // }); + } } + // 不再强制跳转到登录页,而是在需要登录时弹出授权弹窗 }); onMounted(() => { diff --git a/components/wxAuthLogin/WxAuthLogin.vue b/components/wxAuthLogin/WxAuthLogin.vue new file mode 100644 index 0000000..d5bc464 --- /dev/null +++ b/components/wxAuthLogin/WxAuthLogin.vue @@ -0,0 +1,386 @@ + + + + + + diff --git a/docs/微信授权登录功能说明.md b/docs/微信授权登录功能说明.md new file mode 100644 index 0000000..ff4c691 --- /dev/null +++ b/docs/微信授权登录功能说明.md @@ -0,0 +1,321 @@ +# 微信授权登录功能说明 + +## 功能概述 + +本次开发实现了微信授权登录功能,当用户点击首页的特定功能时,会检查用户是否已登录,如果未登录则弹出授权弹窗,而不是直接跳转到登录页面。 + +## 主要功能点 + +### 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 + + + +``` + +### 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 +- 涉及模块: 登录模块、首页模块、用户状态管理 + diff --git a/pages/index/components/index-one.vue b/pages/index/components/index-one.vue index 95fe40c..dcd4271 100644 --- a/pages/index/components/index-one.vue +++ b/pages/index/components/index-one.vue @@ -14,7 +14,7 @@ - + 附近工作 好岗职等你来 @@ -27,55 +27,55 @@ - + 服务指导 - + 事业单位招录 - + 简历制作 - + 劳动政策指引 - + 技能培训信息 - + 技能评价指引 - + 题库和考试 - + 素质测评 - + @@ -304,6 +304,9 @@ + + +