140 lines
4.4 KiB
Markdown
140 lines
4.4 KiB
Markdown
# 多端登录系统实现总结
|
||
|
||
## 项目概述
|
||
已成功完成多端登录系统的重构，支持小程序端、H5端和App端的差异化登录方式。
|
||
|
||
## 实现功能
|
||
|
||
### 1. 多端登录策略
|
||
- **小程序端 (MP-WEIXIN)**: 微信授权登录
|
||
- **H5端 (H5)**: 账号密码登录 + 身份证号码登录
|
||
- **App端 (APP-PLUS)**: 微信授权登录
|
||
|
||
### 2. 新增页面
|
||
|
||
#### 2.1 H5账号密码登录页面 (`pages/login/h5-login.vue`)
|
||
- 账号密码输入表单
|
||
- 登录按钮
|
||
- 跳转到身份证号码登录的入口
|
||
- 美观的UI设计，渐变背景和圆角卡片
|
||
|
||
#### 2.2 身份证号码登录页面 (`pages/login/id-card-login.vue`)
|
||
- Loading页面设计，显示"登录中，请稍候..."
|
||
- 支持从URL参数获取Base64编码的身份证号码
|
||
- 多端Base64解码支持：
|
||
- H5: `atob()`
|
||
- 小程序: `uni.base64ToArrayBuffer()`
|
||
- App: `plus.base64.decode()`
|
||
- 调用后端身份证号码登录接口
|
||
|
||
### 3. API接口扩展
|
||
|
||
#### 3.1 身份证号码登录接口 (`apiRc/login.js`)
|
||
```javascript
|
||
export function idCardLogin(data) {
|
||
return request({
|
||
method: 'post',
|
||
url: '/app/idCardLogin',
|
||
data,
|
||
headers: {
|
||
isToken: false
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
### 4. 登录帮助工具类 (`utils/loginHelper.js`)
|
||
- 平台类型检测 (`getPlatformType`)
|
||
- 登录页面跳转 (`navigateToLoginPage`)
|
||
- 登录状态检查 (`checkLoginAndNavigate`)
|
||
- URL参数解析 (`parseIdCardLoginParams`)
|
||
- Base64解码 (`decodeIdCardBase64`)
|
||
|
||
### 5. 现有组件集成
|
||
|
||
#### 5.1 微信授权登录组件 (`components/wxAuthLogin/WxAuthLogin.vue`)
|
||
- 已修复语法错误
|
||
- H5端点击微信授权登录时跳转到H5登录页面
|
||
- 小程序端保持原有的微信授权登录逻辑
|
||
- App端保持原有的微信授权登录逻辑
|
||
|
||
#### 5.2 首页组件 (`pages/index/components/index-one.vue`)
|
||
- 已集成登录检查逻辑
|
||
- 在`onMounted`生命周期中调用`checkLoginAndNavigate()`
|
||
|
||
#### 5.3 Tabbar组件 (`components/CustomTabBar/CustomTabBar.vue`)
|
||
- 已集成登录状态判断
|
||
- 对于需要登录的页面（发布岗位、我的页面），检查登录状态
|
||
- 未登录时跳转到对应登录页面
|
||
|
||
### 6. 路由配置 (`pages.json`)
|
||
- 已注册新的登录页面路由
|
||
- H5登录页面: `/pages/login/h5-login`
|
||
- 身份证号码登录页面: `/pages/login/id-card-login`
|
||
|
||
## 登录流程
|
||
|
||
### 小程序端登录流程
|
||
1. 用户点击需要登录的功能
|
||
2. 显示微信授权登录弹窗
|
||
3. 用户授权手机号
|
||
4. 调用后端接口获取token
|
||
5. 登录成功，跳转到目标页面
|
||
|
||
### H5端登录流程
|
||
1. 用户点击需要登录的功能
|
||
2. 跳转到H5登录页面
|
||
3. 用户可选择：
|
||
- 账号密码登录
|
||
- 身份证号码登录
|
||
4. 登录成功，跳转到目标页面
|
||
|
||
### 身份证号码登录流程
|
||
1. 第三方系统跳转到身份证号码登录页面
|
||
2. 通过URL参数传递Base64编码的身份证号码
|
||
3. 页面自动解码身份证号码
|
||
4. 调用后端身份证号码登录接口
|
||
5. 获取token和用户信息
|
||
6. 登录成功，跳转到首页
|
||
|
||
## 技术特点
|
||
|
||
### 1. 条件编译
|
||
使用`#ifdef`、`#ifndef`实现多端差异化逻辑
|
||
|
||
### 2. Base64解码
|
||
- H5: `atob(base64Str)`
|
||
- 小程序: `uni.base64ToArrayBuffer(base64Str)`
|
||
- App: `plus.base64.decode(base64Str)`
|
||
|
||
### 3. 状态管理
|
||
使用Pinia store (`useUserStore`)管理用户状态
|
||
|
||
### 4. 错误处理
|
||
完善的错误处理和用户提示
|
||
|
||
## 测试建议
|
||
|
||
1. **小程序端测试**: 验证微信授权登录功能
|
||
2. **H5端测试**: 验证账号密码登录和身份证号码登录
|
||
3. **身份证号码登录测试**: 模拟第三方跳转，验证Base64解码和登录流程
|
||
4. **Tabbar导航测试**: 验证登录状态判断和页面跳转
|
||
|
||
## 文件清单
|
||
- `pages/login/h5-login.vue` - H5账号密码登录页面
|
||
- `pages/login/id-card-login.vue` - 身份证号码登录页面
|
||
- `utils/loginHelper.js` - 登录帮助工具类
|
||
- `apiRc/login.js` - 扩展的API接口
|
||
- `components/wxAuthLogin/WxAuthLogin.vue` - 修复后的微信授权组件
|
||
- `pages/index/components/index-one.vue` - 集成登录检查的首页组件
|
||
- `components/CustomTabBar/CustomTabBar.vue` - 集成登录判断的Tabbar组件
|
||
- `pages.json` - 页面路由配置
|
||
|
||
## 注意事项
|
||
1. 身份证号码登录页面需要第三方系统通过URL参数传递`idCardBase64`
|
||
2. 后端需要实现`/app/idCardLogin`接口
|
||
3. 各端Base64解码方式不同，需要确保兼容性
|
||
4. 登录成功后需要正确存储用户信息和token
|
||
|
||
系统已准备就绪，可以开始多端测试。
|