182 lines
4.4 KiB
Markdown
182 lines
4.4 KiB
Markdown
# 游客模式最终修复方案
|
||
|
||
## 修复思路
|
||
|
||
**核心原则**: 游客模式下不带token访问服务接口,让后端决定是否允许匿名访问。
|
||
|
||
## 修改内容
|
||
|
||
### 1. request.js - 请求拦截器
|
||
|
||
#### 修改1: 移除游客模式的提前拦截
|
||
**之前**: 游客访问非白名单接口时,前端直接拦截
|
||
**现在**: 允许游客访问所有接口,由后端决定是否允许
|
||
|
||
#### 修改2: 游客模式不带token
|
||
**之前**: 游客访问白名单接口时也不带token
|
||
**现在**: 游客模式下所有请求都不带token
|
||
|
||
#### 修改3: 401错误静默处理
|
||
**之前**: 游客访问白名单接口返回401时返回空数据
|
||
**现在**: 游客访问白名单接口返回401时静默失败(不弹窗)
|
||
|
||
### 2. service/list.vue - 服务列表页面
|
||
|
||
#### 修改: 错误处理优化
|
||
**添加**: 检查 `error.silent` 标志,如果是静默失败则不显示错误提示
|
||
|
||
## 工作流程
|
||
|
||
### 游客模式访问服务列表
|
||
|
||
```
|
||
游客打开服务列表
|
||
↓
|
||
前端发送请求(不带token)
|
||
↓
|
||
后端判断:
|
||
├─ 支持匿名访问 → 返回真实数据 ✅
|
||
└─ 不支持匿名访问 → 返回401 ❌
|
||
↓
|
||
前端静默失败(不弹窗)
|
||
↓
|
||
页面显示为空
|
||
```
|
||
|
||
### 游客模式预约服务
|
||
|
||
```
|
||
游客点击"确认预约"
|
||
↓
|
||
前端检查登录状态
|
||
↓
|
||
未登录 → 提示"请先登录" → 跳转登录页面
|
||
```
|
||
|
||
## 后端需要做的
|
||
|
||
**如果希望游客可以查看服务列表**,后端需要修改以下接口的权限:
|
||
|
||
1. `/api/category/all` - 获取服务分类
|
||
2. `/api/service/list` - 获取服务列表
|
||
3. `/api/service/search` - 搜索服务
|
||
|
||
**修改方式**: 允许这些接口在没有token的情况下也能访问(匿名访问)
|
||
|
||
## 修改的文件
|
||
|
||
### peidu/uniapp/src/utils/request.js
|
||
|
||
**修改点1**: 移除游客模式提前拦截
|
||
```javascript
|
||
// ❌ 删除了这段代码
|
||
// if (isGuest && !isGuestAllowedUrl(options.url)) {
|
||
// reject({ code: 401, message: '未登录', silent: true })
|
||
// return
|
||
// }
|
||
```
|
||
|
||
**修改点2**: 简化token添加逻辑
|
||
```javascript
|
||
// ✅ 简化为
|
||
if (token) {
|
||
header['Authorization'] = buildAuthHeader(token)
|
||
}
|
||
```
|
||
|
||
**修改点3**: 游客模式401静默失败
|
||
```javascript
|
||
// HTTP 401
|
||
if (isGuest && isGuestAllowedUrl(options.url)) {
|
||
console.log('[Request] 游客模式，白名单接口返回401，静默失败:', options.url)
|
||
reject({ code: 401, message: '未登录', silent: true })
|
||
return
|
||
}
|
||
|
||
// 业务码 401
|
||
if (isGuest && isGuestAllowedUrl(options.url)) {
|
||
console.log('[Request] 游客模式，白名单接口业务码401，静默失败:', options.url)
|
||
reject({ code: 401, message: '未登录', data: res.data, silent: true })
|
||
return
|
||
}
|
||
```
|
||
|
||
### peidu/uniapp/src/pages/service/list.vue
|
||
|
||
**修改点**: 错误处理优化
|
||
```javascript
|
||
catch (error) {
|
||
console.error('加载服务分类失败:', error)
|
||
// ✅ 游客模式：静默失败,不显示错误提示
|
||
if (error.silent) {
|
||
console.log('游客模式，静默失败，不显示提示')
|
||
} else {
|
||
uni.showToast({ title: '加载分类失败', icon: 'none' })
|
||
}
|
||
}
|
||
```
|
||
|
||
## 测试场景
|
||
|
||
### 场景1: 后端支持匿名访问(理想情况)
|
||
|
||
```
|
||
游客访问服务列表
|
||
↓
|
||
✅ 正常显示服务分类
|
||
✅ 正常显示服务列表
|
||
✅ 可以搜索服务
|
||
✅ 点击"确认预约"时提示登录
|
||
```
|
||
|
||
### 场景2: 后端不支持匿名访问(当前情况)
|
||
|
||
```
|
||
游客访问服务列表
|
||
↓
|
||
❌ 后端返回401
|
||
↓
|
||
✅ 前端静默失败(不弹窗)
|
||
✅ 页面显示为空
|
||
✅ 不影响用户体验
|
||
```
|
||
|
||
### 场景3: 已登录用户
|
||
|
||
```
|
||
已登录用户访问服务列表
|
||
↓
|
||
✅ 正常显示服务分类
|
||
✅ 正常显示服务列表
|
||
✅ 可以搜索服务
|
||
✅ 可以正常预约
|
||
```
|
||
|
||
## 优势
|
||
|
||
1. **最小改动** - 只修改了必要的地方
|
||
2. **不破坏现有功能** - 已登录用户不受影响
|
||
3. **灵活性** - 后端可以自由决定是否支持匿名访问
|
||
4. **用户体验** - 游客模式下不会频繁弹窗
|
||
|
||
## 后续建议
|
||
|
||
**强烈建议联系后端开发人员**,让他们修改服务接口的权限控制,允许匿名访问。这样:
|
||
- ✅ 游客可以浏览服务列表
|
||
- ✅ 可以吸引更多用户注册
|
||
- ✅ 提升用户体验
|
||
|
||
## 执行步骤
|
||
|
||
1. ✅ 代码已修改完成
|
||
2. ⏳ 执行清除缓存脚本
|
||
3. ⏳ 重新编译小程序
|
||
4. ⏳ 测试游客模式
|
||
5. ⏳ 联系后端修改接口权限(如果需要)
|
||
|
||
---
|
||
|
||
**修复时间**: 2026-02-01
|
||
**修复人员**: Kiro AI
|
||
**状态**: 代码已修改,等待测试
|