newToy/FIX_SPOTIFY_INIT_ERROR.md

✅ 修复 "Spotify 服务未初始化" 错误

🐛 问题

错误信息：

Failed to exchange code for token: Error: Spotify 服务未初始化

原因： SpotifyCallback.vue 组件调用 spotifyService.handleCallback() 时，服务没有初始化。

✅ 解决方案

在 SpotifyCallback.vue 中添加服务初始化：

// 初始化 Spotify 服务（必须在处理回调前初始化）
const initSpotifyService = () => {
  const SPOTIFY_CLIENT_ID = '4ed200672ba1421baa31b9859bd84d39'
  const REDIRECT_URI = window.location.origin + '/'
  
  console.log('Initializing Spotify service in callback...')
  spotifyService.initialize({
    clientId: SPOTIFY_CLIENT_ID,
    redirectUri: REDIRECT_URI,
  })
}

onMounted(async () => {
  // 先初始化服务
  initSpotifyService()
  
  // 然后处理回调...
})

📝 完整授权流程

1. MusicRhythm.vue → 初始化服务 + 请求授权
   ↓
2. Spotify 授权页面
   ↓
3. 返回 https://sports.rucky.cn/?code=xxx&state=xxx
   ↓
4. Home.vue → 检测并保存参数到 sessionStorage
   ↓
5. 跳转到 /#/callback
   ↓
6. SpotifyCallback.vue → 初始化服务（重要！）
   ↓
7. 从 sessionStorage 恢复参数
   ↓
8. 调用 handleCallback() 交换 token
   ↓
9. 授权成功！

🎯 关键点

1. 每个使用 spotifyService 的组件都需要初始化

   • MusicRhythm.vue ✅
   • SpotifyCallback.vue ✅（刚刚添加）

2. 初始化参数必须一致

   const SPOTIFY_CLIENT_ID = '4ed200672ba1421baa31b9859bd84d39'
   const REDIRECT_URI = window.location.origin + '/'
   

3. sessionStorage 传递参数

   • Home.vue 保存
   • SpotifyCallback.vue 读取并恢复

🧪 测试

1. 清除所有缓存

   localStorage.clear()
   sessionStorage.clear()
   

2. 部署新代码

   # dist 已重新构建
   # 部署到服务器
   

3. 完整测试流程

   • 访问 https://sports.rucky.cn
   • 进入音乐律动
   • 点击连接 Spotify
   • 授权
   • 应该成功！

✅ 已修复

• ✅ SpotifyCallback.vue 添加了服务初始化
• ✅ 初始化参数与 MusicRhythm.vue 保持一致
• ✅ 重新构建完成

现在应该能正常工作了！ 🎉