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

5.7 KiB
Raw Blame History

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

时间: 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

// 游客模式可访问的接口(不弹出登录提示)
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 的处理中增加游客模式判断

// 处理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

修改点1loadOrders 方法增加游客判断

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
  }
}

修改点2onShow 生命周期重新检查登录状态

onShow() {
  // ✅ 重新检查登录状态
  const token = uni.getStorageSync('token')
  this.isLoggedIn = !!(token && token !== '')
  
  // 只有登录用户才加载订单
  if (this.isLoggedIn) {
    this.loadOrders()
  }
}

修复的关键点

为什么之前的修复没有生效?

  1. 只修复了 res.data.code === 401 的情况

    • 之前只在业务码401时增加了游客判断
    • 但 HTTP 状态码401res.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避免弹窗。