peixue-dev/Archive/[一次性]订单列表页面游客模式实现-2026-02-01.md

# 订单列表页面游客模式实现 - 彻底修复版

**时间：** 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，避免弹窗。