101 lines
2.9 KiB
Markdown
101 lines
2.9 KiB
Markdown
|
# 游客模式实现说明
|
|||
|
|
|
|||
|
|
**日期**: 2026-02-01
|
|||
|
|
**修改文件**: `peidu/uniapp/src/utils/request.js`
|
|||
|
|
|
|||
|
|
## 问题描述
|
|||
|
|
|
|||
|
|
用户打开小程序进入家长端首页时，会立即弹出"登录已过期"提示，影响游客浏览体验。
|
|||
|
|
|
|||
|
|
## 需求
|
|||
|
|
|
|||
|
|
- 游客（未登录用户）可以正常浏览家长端首页
|
|||
|
|
- 不要在首页加载时弹出登录提示
|
|||
|
|
- 只有在需要登录的操作时才提示登录
|
|||
|
|
|
|||
|
|
## 实现方案
|
|||
|
|
|
|||
|
|
### 1. 添加游客可访问接口白名单
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 游客模式可访问的接口（不弹出登录提示）
|
|||
|
|
const GUEST_ALLOWED_URLS = [
|
|||
|
|
'/api/notification/unread-count', // 未读消息数
|
|||
|
|
'/api/timecard/list', // 时卡列表
|
|||
|
|
'/api/home/courses', // 首页课程
|
|||
|
|
'/api/banner/list', // 轮播图
|
|||
|
|
'/api/service/list', // 服务列表
|
|||
|
|
'/api/teacher/list', // 教师列表
|
|||
|
|
'/api/course/list' // 课程列表
|
|||
|
|
]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 添加辅助函数
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 判断是否是游客可访问的接口
|
|||
|
|
function isGuestAllowedUrl(url) {
|
|||
|
|
return GUEST_ALLOWED_URLS.some(allowedUrl => url.includes(allowedUrl))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断是否是游客模式（没有token）
|
|||
|
|
function isGuestMode() {
|
|||
|
|
const token = uni.getStorageSync('token')
|
|||
|
|
return !token || token === ''
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 修改 401 错误处理逻辑
|
|||
|
|
|
|||
|
|
在两个地方添加游客模式判断：
|
|||
|
|
|
|||
|
|
**位置1**: HTTP 状态码 401
|
|||
|
|
```javascript
|
|||
|
|
// 游客模式：如果是游客可访问的接口，静默失败，不弹窗
|
|||
|
|
if (isGuestMode() && isGuestAllowedUrl(options.url)) {
|
|||
|
|
console.log('[Request] 游客模式，接口静默失败:', options.url)
|
|||
|
|
reject({ code: 401, message: '未登录', data: res, silent: true })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**位置2**: 业务码 401
|
|||
|
|
```javascript
|
|||
|
|
// 游客模式：如果是游客可访问的接口，静默失败，不弹窗
|
|||
|
|
if (isGuestMode() && isGuestAllowedUrl(options.url)) {
|
|||
|
|
console.log('[Request] 游客模式，接口静默失败:', options.url)
|
|||
|
|
reject({ code: 401, message: '未登录', data: res.data, silent: true })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 工作原理
|
|||
|
|
|
|||
|
|
1. **游客进入首页**
|
|||
|
|
- 没有 token（`isGuestMode() = true`）
|
|||
|
|
- 首页调用接口（如 `/api/home/courses`）
|
|||
|
|
|
|||
|
|
2. **接口返回 401**
|
|||
|
|
- 检查是否是游客模式 ✅
|
|||
|
|
- 检查是否在白名单中 ✅
|
|||
|
|
- **静默失败，不弹窗** ✅
|
|||
|
|
|
|||
|
|
3. **已登录用户 token 过期**
|
|||
|
|
- 有 token（`isGuestMode() = false`）
|
|||
|
|
- 接口返回 401
|
|||
|
|
- **正常弹窗提示登录** ✅
|
|||
|
|
|
|||
|
|
## 效果
|
|||
|
|
|
|||
|
|
- ✅ 游客可以正常浏览家长端首页
|
|||
|
|
- ✅ 不会弹出"登录已过期"提示
|
|||
|
|
- ✅ 已登录用户 token 过期时仍然会提示
|
|||
|
|
- ✅ 需要登录的操作（下单、支付等）不受影响
|
|||
|
|
|
|||
|
|
## 后续优化建议
|
|||
|
|
|
|||
|
|
如果后端支持，可以考虑：
|
|||
|
|
1. 将白名单接口改为后端允许匿名访问
|
|||
|
|
2. 前端只在需要登录的操作时检查 token
|
|||
|
|
3. 添加"登录后查看更多"的引导提示
|