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 @@
+
+
+