207 lines
5.7 KiB
Markdown
207 lines
5.7 KiB
Markdown
# 订单列表页面游客模式实现 - 彻底修复版
|
||
|
||
**时间：** 2026-02-01
|
||
**问题：** 未登录的家长端访问订单列表页面时，弹出"登录已过期"提示
|
||
**需求：** 游客模式下可以看到订单列表页面，但不显示个人订单数据
|
||
|
||
---
|
||
|
||
## 问题分析
|
||
|
||
### 原始问题
|
||
1. 未登录用户访问 `/pages/order/list` 页面
|
||
2. 页面尝试调用 `/api/order/list-full` 接口
|
||
3. 接口返回 401 未登录错误
|
||
4. request.js 拦截器弹出"登录已过期"提示框
|
||
|
||
### 根本原因
|
||
- **问题1：** 订单列表接口不在游客模式允许访问的接口列表中
|
||
- **问题2：** 页面逻辑没有判断登录状态，直接加载订单
|
||
- **问题3：** request.js 中 `res.statusCode === 401` 的处理逻辑缺少游客模式判断
|
||
|
||
---
|
||
|
||
## 修复方案（彻底版）
|
||
|
||
### 1. 修改 request.js - 添加订单接口到游客白名单
|
||
|
||
**文件：** `peidu/uniapp/src/utils/request.js`
|
||
|
||
```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',
|
||
'/api/order/list', // ✅ 新增
|
||
'/api/order/list-full' // ✅ 新增
|
||
]
|
||
```
|
||
|
||
---
|
||
|
||
### 2. 修改 request.js - 修复 statusCode 401 处理逻辑
|
||
|
||
**关键修复：** 在 `res.statusCode === 401` 的处理中增加游客模式判断
|
||
|
||
```javascript
|
||
// 处理401未登录
|
||
if (res.statusCode === 401) {
|
||
if (!shouldHandleAuthExpired(options.url)) {
|
||
reject({ code: 401, message: '未登录', data: res })
|
||
return
|
||
}
|
||
|
||
// ✅ 游客模式：如果是游客可访问的接口，静默失败，不弹窗
|
||
if (isGuestMode() && isGuestAllowedUrl(options.url)) {
|
||
console.log('[Request] 游客模式，接口静默失败:', options.url)
|
||
reject({ code: 401, message: '未登录', data: res, silent: true })
|
||
return
|
||
}
|
||
|
||
const latestToken = uni.getStorageSync('token')
|
||
|
||
// ✅ 游客模式：没有token时，不尝试刷新，直接静默失败
|
||
if (!latestToken) {
|
||
console.log('[Request] 游客模式，无token，静默失败')
|
||
reject({ code: 401, message: '未登录', data: res, silent: true })
|
||
return
|
||
}
|
||
|
||
// ... 后续刷新token逻辑
|
||
}
|
||
```
|
||
|
||
**修复要点：**
|
||
1. 增加游客模式判断：`isGuestMode() && isGuestAllowedUrl(options.url)`
|
||
2. 增加无token判断：`!latestToken` 时直接静默失败
|
||
3. 静默失败时添加 `silent: true` 标记
|
||
|
||
---
|
||
|
||
### 3. 修改 list.vue - 游客模式不加载订单
|
||
|
||
**文件：** `peidu/uniapp/src/pages/order/list.vue`
|
||
|
||
#### 修改点1：loadOrders 方法增加游客判断
|
||
|
||
```javascript
|
||
async loadOrders() {
|
||
// ✅ 游客模式：不加载订单，直接返回
|
||
if (!this.isLoggedIn) {
|
||
console.log('[服务日历] 游客模式，不加载订单')
|
||
this.loading = false
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
try {
|
||
// ... 原有加载逻辑
|
||
} catch (error) {
|
||
console.error('加载订单异常:', error)
|
||
// ✅ 游客模式：静默失败，不显示错误提示
|
||
if (!error.silent) {
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
}
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 修改点2：onShow 生命周期重新检查登录状态
|
||
|
||
```javascript
|
||
onShow() {
|
||
// ✅ 重新检查登录状态
|
||
const token = uni.getStorageSync('token')
|
||
this.isLoggedIn = !!(token && token !== '')
|
||
|
||
// 只有登录用户才加载订单
|
||
if (this.isLoggedIn) {
|
||
this.loadOrders()
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 修复的关键点
|
||
|
||
### 为什么之前的修复没有生效？
|
||
|
||
1. **只修复了 `res.data.code === 401` 的情况**
|
||
- 之前只在业务码401时增加了游客判断
|
||
- 但 HTTP 状态码401（`res.statusCode === 401`）的处理逻辑没有修复
|
||
|
||
2. **缺少无token的判断**
|
||
- 游客模式下没有token
|
||
- 但代码仍然尝试刷新token，导致弹窗
|
||
|
||
3. **两个401处理分支都需要修复**
|
||
- `res.statusCode === 401` - HTTP状态码401
|
||
- `res.data.code === 401` - 业务码401
|
||
- 两个分支都需要增加游客模式判断
|
||
|
||
---
|
||
|
||
## 游客模式体验
|
||
|
||
### 未登录时显示
|
||
- ✅ 可以看到日历界面
|
||
- ✅ 可以看到筛选栏
|
||
- ✅ 显示"需要登录"提示
|
||
- ✅ 显示"立即登录"按钮
|
||
- ❌ 不显示订单数据
|
||
- ❌ 不弹出"登录已过期"错误
|
||
- ❌ 不弹出任何错误提示
|
||
|
||
### 登录后显示
|
||
- ✅ 正常加载个人订单
|
||
- ✅ 显示订单数量统计
|
||
- ✅ 可以查看订单详情
|
||
- ✅ 可以进行订单操作
|
||
|
||
---
|
||
|
||
## 测试验证
|
||
|
||
### 测试步骤
|
||
1. 执行 `Archive/[一次性]清除缓存重新编译-游客模式修复-2026-02-01.bat`
|
||
2. 在微信开发者工具中清除缓存
|
||
3. 清除小程序Storage中的token
|
||
4. 以游客身份访问订单列表页面
|
||
5. 验证不弹出"登录已过期"提示
|
||
6. 验证显示"需要登录"空状态
|
||
7. 点击"立即登录"按钮跳转到登录页
|
||
8. 登录后返回，验证正常显示订单
|
||
|
||
### 预期结果
|
||
- ✅ 游客模式：显示空状态，不弹任何错误
|
||
- ✅ 登录模式：正常显示订单列表
|
||
- ✅ 控制台显示：`[Request] 游客模式，无token，静默失败`
|
||
|
||
---
|
||
|
||
## 相关文件
|
||
|
||
- `peidu/uniapp/src/utils/request.js` - 请求拦截器（已修复两处401处理）
|
||
- `peidu/uniapp/src/pages/order/list.vue` - 订单列表页面
|
||
- `Archive/[一次性]清除缓存重新编译-游客模式修复-2026-02-01.bat` - 清除缓存脚本
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
通过以下三个改动彻底实现了游客模式：
|
||
|
||
1. **request.js - 白名单** - 将订单接口加入游客白名单
|
||
2. **request.js - HTTP 401** - 修复 `res.statusCode === 401` 的游客判断
|
||
3. **list.vue - 页面逻辑** - 游客模式下不加载订单
|
||
|
||
**关键修复：** 增加了 `!latestToken` 的判断，游客模式下没有token时直接静默失败，不尝试刷新token，避免弹窗。
|