# 订单列表页面游客模式实现 - 彻底修复版 **时间:** 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,避免弹窗。