Ai_GirlFriend/开发/2026年2月3日/登录无法进入问题修复.md

登录显示成功但无法进入系统问题修复

问题描述

用户登录后显示"登录成功"，但页面一直停留在登录页面或显示空白，无法进入系统。

问题原因分析

原因 1：getBobbiesList 初始值为空字符串

代码位置：xuniYou/pages/index/index.vue 第 932 行

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 行

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：

// 修改前
getBobbiesList: '',

// 修改后
getBobbiesList: {
    reg_step: 1  // 默认显示第一步：完善个人资料
},

方案 2：添加加载状态

添加一个加载状态，在数据加载完成前显示加载提示：

data() {
    return {
        isLoading: true,  // 添加加载状态
        getBobbiesList: {
            reg_step: 1
        },
        // ...
    }
}

在模板中添加加载提示：

<view v-if="isLoading" class="loading-container">
    <view class="loading-text">加载中...</view>
</view>

<view v-else>
    <!-- 原有内容 -->
</view>

在 getUserBasic() 成功后设置：

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()

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 步：检查后端服务是否运行

# 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

在浏览器控制台执行：

// 检查 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 行：

// 修改前
getBobbiesList: '',

// 修改后
getBobbiesList: {
    reg_step: 1,
    level: 0,
    intimacy: 0,
    next_level_intimacy: 100
},

第 5 步：重新编译前端

# 在 xuniYou 目录下
npm run dev:h5
# 或
npm run build:h5

---

调试方法

方法 1：添加调试日志

在 getUserBasic() 方法中添加日志：

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：

# 替换 YOUR_TOKEN 为实际的 token
curl -X GET "http://localhost:30100/api/user_basic/get_user_basic" \
  -H "token: YOUR_TOKEN"

预期响应：

{
  "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 条件：

<!-- 修改前 -->
<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

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'
        })
    })
},

在模板中添加加载状态

<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. 清除缓存

   // 在浏览器控制台执行
   uni.clearStorageSync()
   

2. 重新登录

   • 输入手机号和密码
   • 点击登录
   • 观察是否正常跳转

3. 检查日志

   • 查看控制台是否有错误
   • 查看 Network 标签的 API 请求
   • 查看 getUserBasic 的响应数据

4. 验证功能

   • 确认能正常进入首页
   • 确认能看到用户信息
   • 确认能正常使用各个功能

---

预防措施

1. 始终为对象类型的数据设置默认值

   // ❌ 不好
   userData: ''
   
   // ✅ 好
   userData: {
       id: 0,
       name: '',
       // ...
   }
   

2. 添加错误处理

   GetUserBasic({}).then(res => {
       // ...
   }).catch(err => {
       console.error('错误:', err)
       // 显示友好的错误提示
   })
   

3. 添加加载状态

   • 让用户知道系统正在处理
   • 避免用户重复点击

4. 添加调试日志

   • 方便排查问题
   • 生产环境可以关闭

---

总结

登录无法进入的主要原因是 getBobbiesList 初始值为空字符串，导致页面判断逻辑失效。

推荐修复方案：

1. 将 getBobbiesList 初始值改为对象
2. 添加加载状态
3. 在 onLoad 时也调用 getUserBasic()
4. 添加完善的错误处理

修复后，用户登录成功就能正常进入系统了！