548 lines
12 KiB
Markdown
548 lines
12 KiB
Markdown
# 登录显示成功但无法进入系统问题修复
|
||
|
||
## 问题描述
|
||
|
||
用户登录后显示"登录成功"，但页面一直停留在登录页面或显示空白，无法进入系统。
|
||
|
||
## 问题原因分析
|
||
|
||
### 原因 1：`getBobbiesList` 初始值为空字符串
|
||
|
||
**代码位置**：`xuniYou/pages/index/index.vue` 第 932 行
|
||
|
||
```javascript
|
||
getBobbiesList: '', // ❌ 初始值为空字符串
|
||
```
|
||
|
||
**问题**：
|
||
- 页面使用 `v-show="getBobbiesList.reg_step == 1 || getBobbiesList.reg_step == 2 || getBobbiesList.reg_step == 3"` 来判断显示哪个界面
|
||
- 当 `getBobbiesList` 为空字符串时，`getBobbiesList.reg_step` 为 `undefined`
|
||
- 导致所有 `v-show` 条件都不满足，页面显示空白
|
||
|
||
### 原因 2：`getUserBasic()` 调用时机问题
|
||
|
||
**代码位置**：`xuniYou/pages/index/index.vue` 第 960-969 行
|
||
|
||
```javascript
|
||
onShow() {
|
||
this.checkUnderAgeStatus();
|
||
|
||
if (uni.getStorageSync('token')) {
|
||
this.getUserBasic()
|
||
this.loverBasic()
|
||
this.loadHomeLooks()
|
||
}
|
||
}
|
||
```
|
||
|
||
**问题**：
|
||
- 只有在 `onShow()` 时才调用 `getUserBasic()`
|
||
- 如果从登录页跳转过来，可能还没来得及执行 `onShow()`
|
||
- 或者 token 还没有正确保存到 storage
|
||
|
||
### 原因 3：API 请求失败
|
||
|
||
可能的原因：
|
||
- PHP 后端服务未启动（端口 30100）
|
||
- Token 无效或过期
|
||
- 网络请求失败
|
||
- CORS 跨域问题
|
||
|
||
---
|
||
|
||
## 解决方案
|
||
|
||
### 方案 1：修改 `getBobbiesList` 初始值（推荐）
|
||
|
||
将初始值从空字符串改为对象，并设置默认的 `reg_step`：
|
||
|
||
```javascript
|
||
// 修改前
|
||
getBobbiesList: '',
|
||
|
||
// 修改后
|
||
getBobbiesList: {
|
||
reg_step: 1 // 默认显示第一步：完善个人资料
|
||
},
|
||
```
|
||
|
||
### 方案 2：添加加载状态
|
||
|
||
添加一个加载状态，在数据加载完成前显示加载提示：
|
||
|
||
```javascript
|
||
data() {
|
||
return {
|
||
isLoading: true, // 添加加载状态
|
||
getBobbiesList: {
|
||
reg_step: 1
|
||
},
|
||
// ...
|
||
}
|
||
}
|
||
```
|
||
|
||
在模板中添加加载提示：
|
||
|
||
```vue
|
||
<view v-if="isLoading" class="loading-container">
|
||
<view class="loading-text">加载中...</view>
|
||
</view>
|
||
|
||
<view v-else>
|
||
<!-- 原有内容 -->
|
||
</view>
|
||
```
|
||
|
||
在 `getUserBasic()` 成功后设置：
|
||
|
||
```javascript
|
||
getUserBasic() {
|
||
GetUserBasic({}).then(res => {
|
||
if (res.code == 1) {
|
||
let data = res.data
|
||
// ...
|
||
this.getBobbiesList = data
|
||
this.isLoading = false // 加载完成
|
||
}
|
||
}).catch(() => {
|
||
this.isLoading = false // 加载失败也要隐藏加载状态
|
||
uni.showToast({
|
||
title: '加载失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
```
|
||
|
||
### 方案 3：在 `onLoad` 时也调用 `getUserBasic()`
|
||
|
||
```javascript
|
||
onLoad(options) {
|
||
//#ifdef MP-WEIXIN
|
||
this.checkPermission()
|
||
//#endif
|
||
|
||
// 如果有 tab 参数，切换到对应的 tab
|
||
if (options && options.tab) {
|
||
const tabIndex = parseInt(options.tab);
|
||
if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < this.tabs.length) {
|
||
this.currentTab = tabIndex;
|
||
}
|
||
}
|
||
|
||
// 添加：在 onLoad 时也检查并加载用户数据
|
||
if (uni.getStorageSync('token')) {
|
||
this.getUserBasic()
|
||
this.loverBasic()
|
||
this.loadHomeLooks()
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
this.getServerData();
|
||
},
|
||
```
|
||
|
||
---
|
||
|
||
## 快速修复步骤
|
||
|
||
### 第 1 步：检查后端服务是否运行
|
||
|
||
```bash
|
||
# Windows - 检查 PHP 服务
|
||
netstat -ano | findstr :30100
|
||
|
||
# 如果没有运行，启动 PHP 服务
|
||
cd xunifriend_RaeeC/public
|
||
php -S 0.0.0.0:30100
|
||
```
|
||
|
||
### 第 2 步：检查浏览器控制台
|
||
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到 Console 标签
|
||
3. 查看是否有错误信息
|
||
4. 切换到 Network 标签
|
||
5. 查看 API 请求是否成功
|
||
|
||
**关键检查点**：
|
||
- `/api/user_basic/get_user_basic` 请求是否返回 200
|
||
- 响应数据中是否包含 `reg_step` 字段
|
||
- Token 是否正确传递
|
||
|
||
### 第 3 步：检查 Token
|
||
|
||
在浏览器控制台执行：
|
||
|
||
```javascript
|
||
// 检查 token 是否存在
|
||
console.log('Token:', uni.getStorageSync('token'))
|
||
|
||
// 检查用户信息
|
||
console.log('UserInfo:', uni.getStorageSync('userinfo'))
|
||
|
||
// 手动调用 getUserBasic
|
||
// 在 index 页面的控制台执行
|
||
this.getUserBasic()
|
||
```
|
||
|
||
### 第 4 步：修改代码（推荐方案 1）
|
||
|
||
修改 `xuniYou/pages/index/index.vue` 第 932 行：
|
||
|
||
```javascript
|
||
// 修改前
|
||
getBobbiesList: '',
|
||
|
||
// 修改后
|
||
getBobbiesList: {
|
||
reg_step: 1,
|
||
level: 0,
|
||
intimacy: 0,
|
||
next_level_intimacy: 100
|
||
},
|
||
```
|
||
|
||
### 第 5 步：重新编译前端
|
||
|
||
```bash
|
||
# 在 xuniYou 目录下
|
||
npm run dev:h5
|
||
# 或
|
||
npm run build:h5
|
||
```
|
||
|
||
---
|
||
|
||
## 调试方法
|
||
|
||
### 方法 1：添加调试日志
|
||
|
||
在 `getUserBasic()` 方法中添加日志：
|
||
|
||
```javascript
|
||
getUserBasic() {
|
||
console.log('开始获取用户信息...')
|
||
console.log('Token:', uni.getStorageSync('token'))
|
||
|
||
GetUserBasic({}).then(res => {
|
||
console.log('getUserBasic 响应:', res)
|
||
|
||
if (res.code == 1) {
|
||
let data = res.data
|
||
console.log('用户数据:', data)
|
||
console.log('reg_step:', data.reg_step)
|
||
|
||
// ...
|
||
this.getBobbiesList = data
|
||
console.log('getBobbiesList 已更新:', this.getBobbiesList)
|
||
} else {
|
||
console.error('getUserBasic 失败:', res.msg)
|
||
}
|
||
}).catch(err => {
|
||
console.error('getUserBasic 异常:', err)
|
||
})
|
||
}
|
||
```
|
||
|
||
### 方法 2：检查 API 响应
|
||
|
||
使用 curl 或 Postman 测试 API：
|
||
|
||
```bash
|
||
# 替换 YOUR_TOKEN 为实际的 token
|
||
curl -X GET "http://localhost:30100/api/user_basic/get_user_basic" \
|
||
-H "token: YOUR_TOKEN"
|
||
```
|
||
|
||
**预期响应**：
|
||
|
||
```json
|
||
{
|
||
"code": 1,
|
||
"msg": "成功",
|
||
"data": {
|
||
"id": 1,
|
||
"username": "18800000001",
|
||
"nickname": "用户昵称",
|
||
"avatar": "头像URL",
|
||
"reg_step": 4,
|
||
"level": 1,
|
||
"intimacy": 50,
|
||
"next_level_intimacy": 100,
|
||
// ...
|
||
}
|
||
}
|
||
```
|
||
|
||
### 方法 3：临时绕过检查
|
||
|
||
如果需要紧急修复，可以临时修改 `v-show` 条件：
|
||
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<view v-show="getBobbiesList.reg_step == 1 || getBobbiesList.reg_step == 2 || getBobbiesList.reg_step == 3">
|
||
|
||
<!-- 修改后（临时） -->
|
||
<view v-show="!getBobbiesList || getBobbiesList.reg_step == 1 || getBobbiesList.reg_step == 2 || getBobbiesList.reg_step == 3">
|
||
```
|
||
|
||
---
|
||
|
||
## 常见错误和解决方法
|
||
|
||
### 错误 1：Cannot read property 'reg_step' of ''
|
||
|
||
**原因**：`getBobbiesList` 为空字符串
|
||
|
||
**解决**：使用方案 1，将初始值改为对象
|
||
|
||
### 错误 2：Network Error
|
||
|
||
**原因**：后端服务未启动或网络问题
|
||
|
||
**解决**：
|
||
1. 检查 PHP 服务是否运行
|
||
2. 检查端口是否正确（30100）
|
||
3. 检查防火墙设置
|
||
|
||
### 错误 3：401 Unauthorized
|
||
|
||
**原因**：Token 无效或过期
|
||
|
||
**解决**：
|
||
1. 清除本地存储，重新登录
|
||
2. 检查 token 是否正确保存
|
||
3. 检查后端 token 验证逻辑
|
||
|
||
### 错误 4：页面显示空白
|
||
|
||
**原因**：所有 `v-show` 条件都不满足
|
||
|
||
**解决**：
|
||
1. 检查 `getBobbiesList.reg_step` 的值
|
||
2. 添加默认显示逻辑
|
||
3. 使用方案 2 添加加载状态
|
||
|
||
---
|
||
|
||
## 完整修复代码
|
||
|
||
### 修改 `xuniYou/pages/index/index.vue`
|
||
|
||
```javascript
|
||
data() {
|
||
return {
|
||
// ... 其他数据
|
||
|
||
// 修改这里：添加默认值
|
||
getBobbiesList: {
|
||
reg_step: 1, // 默认第一步
|
||
level: 0,
|
||
intimacy: 0,
|
||
next_level_intimacy: 100
|
||
},
|
||
|
||
loverBasicList: null, // 改为 null 而不是空字符串
|
||
|
||
// 添加加载状态
|
||
isLoading: true,
|
||
|
||
// ... 其他数据
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
//#ifdef MP-WEIXIN
|
||
this.checkPermission()
|
||
//#endif
|
||
|
||
console.log('uni.env.', uni.env)
|
||
|
||
// 如果有 tab 参数，切换到对应的 tab
|
||
if (options && options.tab) {
|
||
const tabIndex = parseInt(options.tab);
|
||
if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < this.tabs.length) {
|
||
this.currentTab = tabIndex;
|
||
}
|
||
}
|
||
|
||
// 添加：在 onLoad 时也加载用户数据
|
||
const token = uni.getStorageSync('token')
|
||
console.log('onLoad - Token:', token)
|
||
|
||
if (token) {
|
||
this.getUserBasic()
|
||
this.loverBasic()
|
||
this.loadHomeLooks()
|
||
} else {
|
||
// 没有 token，显示默认状态
|
||
this.isLoading = false
|
||
}
|
||
},
|
||
|
||
getUserBasic() {
|
||
console.log('开始获取用户信息...')
|
||
|
||
GetUserBasic({}).then(res => {
|
||
console.log('getUserBasic 响应:', res)
|
||
|
||
if (res.code == 1) {
|
||
let data = res.data
|
||
const conversationStore = useConversationStore();
|
||
let listener = {
|
||
nickname: data.username,
|
||
headImage: data.avatar,
|
||
openid: data.wxapp_openid,
|
||
}
|
||
conversationStore.setUserInfo(listener);
|
||
|
||
this.getBobbiesList = data
|
||
this.isLoading = false // 加载完成
|
||
|
||
console.log('用户数据已更新:', this.getBobbiesList)
|
||
this.getServerData();
|
||
} else {
|
||
this.isLoading = false
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
console.error('getUserBasic 异常:', err)
|
||
this.isLoading = false
|
||
uni.showToast({
|
||
title: '加载失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
```
|
||
|
||
### 在模板中添加加载状态
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- 加载状态 -->
|
||
<view v-if="isLoading" class="loading-container">
|
||
<view class="loading-spinner"></view>
|
||
<view class="loading-text">加载中...</view>
|
||
</view>
|
||
|
||
<!-- 原有内容 -->
|
||
<view v-else>
|
||
<!-- ... -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100vh;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 3px solid #e0e0e0;
|
||
border-top-color: #9F47FF;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
---
|
||
|
||
## 测试步骤
|
||
|
||
1. **清除缓存**
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
uni.clearStorageSync()
|
||
```
|
||
|
||
2. **重新登录**
|
||
- 输入手机号和密码
|
||
- 点击登录
|
||
- 观察是否正常跳转
|
||
|
||
3. **检查日志**
|
||
- 查看控制台是否有错误
|
||
- 查看 Network 标签的 API 请求
|
||
- 查看 `getUserBasic` 的响应数据
|
||
|
||
4. **验证功能**
|
||
- 确认能正常进入首页
|
||
- 确认能看到用户信息
|
||
- 确认能正常使用各个功能
|
||
|
||
---
|
||
|
||
## 预防措施
|
||
|
||
1. **始终为对象类型的数据设置默认值**
|
||
```javascript
|
||
// ❌ 不好
|
||
userData: ''
|
||
|
||
// ✅ 好
|
||
userData: {
|
||
id: 0,
|
||
name: '',
|
||
// ...
|
||
}
|
||
```
|
||
|
||
2. **添加错误处理**
|
||
```javascript
|
||
GetUserBasic({}).then(res => {
|
||
// ...
|
||
}).catch(err => {
|
||
console.error('错误:', err)
|
||
// 显示友好的错误提示
|
||
})
|
||
```
|
||
|
||
3. **添加加载状态**
|
||
- 让用户知道系统正在处理
|
||
- 避免用户重复点击
|
||
|
||
4. **添加调试日志**
|
||
- 方便排查问题
|
||
- 生产环境可以关闭
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
登录无法进入的主要原因是 `getBobbiesList` 初始值为空字符串，导致页面判断逻辑失效。
|
||
|
||
**推荐修复方案**：
|
||
1. 将 `getBobbiesList` 初始值改为对象
|
||
2. 添加加载状态
|
||
3. 在 `onLoad` 时也调用 `getUserBasic()`
|
||
4. 添加完善的错误处理
|
||
|
||
修复后，用户登录成功就能正常进入系统了！
|