103 lines
2.2 KiB
Markdown
103 lines
2.2 KiB
Markdown
# ✅ 修复 "Spotify 服务未初始化" 错误
|
|
|
|
## 🐛 问题
|
|
|
|
错误信息：
|
|
```
|
|
Failed to exchange code for token: Error: Spotify 服务未初始化
|
|
```
|
|
|
|
**原因：** `SpotifyCallback.vue` 组件调用 `spotifyService.handleCallback()` 时，服务没有初始化。
|
|
|
|
## ✅ 解决方案
|
|
|
|
在 `SpotifyCallback.vue` 中添加服务初始化：
|
|
|
|
```typescript
|
|
// 初始化 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. **初始化参数必须一致**
|
|
```typescript
|
|
const SPOTIFY_CLIENT_ID = '4ed200672ba1421baa31b9859bd84d39'
|
|
const REDIRECT_URI = window.location.origin + '/'
|
|
```
|
|
|
|
3. **sessionStorage 传递参数**
|
|
- Home.vue 保存
|
|
- SpotifyCallback.vue 读取并恢复
|
|
|
|
## 🧪 测试
|
|
|
|
1. **清除所有缓存**
|
|
```javascript
|
|
localStorage.clear()
|
|
sessionStorage.clear()
|
|
```
|
|
|
|
2. **部署新代码**
|
|
```bash
|
|
# dist 已重新构建
|
|
# 部署到服务器
|
|
```
|
|
|
|
3. **完整测试流程**
|
|
- 访问 https://sports.rucky.cn
|
|
- 进入音乐律动
|
|
- 点击连接 Spotify
|
|
- 授权
|
|
- 应该成功！
|
|
|
|
## ✅ 已修复
|
|
|
|
- ✅ SpotifyCallback.vue 添加了服务初始化
|
|
- ✅ 初始化参数与 MusicRhythm.vue 保持一致
|
|
- ✅ 重新构建完成
|
|
|
|
**现在应该能正常工作了！** 🎉
|