# 🔍 调试 Spotify 回调问题

## 🐛 问题描述

**症状：**
授权成功，但返回的 URL 是：
```
https://sports.rucky.cn/?code=...&state=...#/%2Fcallback
```

而不是期望的：
```
https://sports.rucky.cn/callback?code=...&state=...
```

## 🎯 可能的原因

### 1. Spotify Dashboard 配置错误

检查 Spotify Dashboard 中是否配置了：
```
❌ 错误：https://sports.rucky.cn/
✅ 正确：https://sports.rucky.cn/callback
```

**解决方案：**
1. 访问 https://developer.spotify.com/dashboard/4ed200672ba1421baa31b9859bd84d39/settings
2. 点击 "Edit Settings"
3. 检查 "Redirect URIs" 中是否有 `https://sports.rucky.cn/callback`
4. 如果只有 `https://sports.rucky.cn/`，需要：
   - 删除 `https://sports.rucky.cn/`
   - 添加 `https://sports.rucky.cn/callback`
5. 点击 "Save"

### 2. 代码中 redirect_uri 不一致

检查代码中的配置：

**src/views/MusicRhythm.vue:**
```typescript
const REDIRECT_URI = window.location.origin + '/callback'
// 应该生成：https://sports.rucky.cn/callback
```

**验证方法：**
在浏览器控制台运行：
```javascript
console.log(window.location.origin + '/callback')
// 应该输出：https://sports.rucky.cn/callback
```

### 3. 缓存问题

如果之前配置了 `https://sports.rucky.cn/`，浏览器可能缓存了旧的授权请求。

**解决方案：**
```bash
# 清除所有相关的 localStorage
localStorage.removeItem('spotify_code_verifier')
localStorage.removeItem('spotify_auth_state')
localStorage.removeItem('spotify_access_token')
localStorage.removeItem('spotify_token_expires_at')

# 或者使用无痕模式重试
```

## ✅ 已实施的临时修复

在 `src/views/Home.vue` 中添加了检测和转发逻辑：

```typescript
onMounted(() => {
  // 检查是否是 Spotify 授权回调
  const params = new URLSearchParams(window.location.search)
  if (params.has('code')) {
    // 转发到 /callback 路由处理
    router.push({
      name: 'SpotifyCallback',
      query: Object.fromEntries(params)
    })
  }
})
```

这样即使 Spotify 返回到根路径，也会自动转发到正确的回调页面。

## 🧪 测试步骤

### 1. 清除缓存
```javascript
// 在浏览器控制台运行
localStorage.clear()
```

### 2. 确认配置
访问：https://developer.spotify.com/dashboard/4ed200672ba1421baa31b9859bd84d39/settings

应该看到：
```
Redirect URIs:
✅ http://localhost:5173/callback
✅ https://sports.rucky.cn/callback
```

### 3. 重新部署
```bash
npm run build
rsync -avz --delete dist/ user@sports.rucky.cn:/var/www/sports.rucky.cn/
```

### 4. 测试授权流程
1. 访问 https://sports.rucky.cn/
2. 进入音乐律动页面
3. 点击 "连接 Spotify 账号"
4. 授权后应该：
   - 返回到应用（可能是根路径）
   - 自动转发到 SpotifyCallback 页面
   - 显示 "授权成功！"
   - 自动跳转到音乐律动页面

## 🔧 完整修复方案

### 方案 A：修复 Redirect URI 配置（推荐）

**优点：** 符合标准，最干净的解决方案
**步骤：**
1. 在 Spotify Dashboard 中**只配置** `/callback` 路径
2. 删除其他可能的配置
3. 等待几分钟让配置生效
4. 测试

### 方案 B：使用根路径 + 转发（当前方案）

**优点：** 容错性强，即使配置错误也能工作
**缺点：** URL 中会短暂出现 code 参数
**状态：** 已实施 ✅

## 📝 最佳实践

根据 Spotify 官方文档，Redirect URI 应该：

1. ✅ 使用具体的路径（如 `/callback`）
2. ✅ 在 Dashboard 中精确匹配
3. ✅ 包括协议、域名、端口、路径
4. ❌ 避免使用根路径 `/`

**推荐配置：**
```
开发：http://localhost:5173/callback
生产：https://sports.rucky.cn/callback
```

## 🎯 下一步

1. **立即做：** 确认 Spotify Dashboard 中的配置
2. **如果错误：** 修改为 `/callback` 并保存
3. **清除缓存：** 使用无痕模式测试
4. **重新测试：** 完整走一遍授权流程

## 📞 如果还有问题

检查浏览器控制台的日志：
```javascript
// 应该看到类似的日志
"Detected Spotify callback, redirecting to /callback route"
```

如果看到这条日志，说明我们的临时修复生效了，即使 Redirect URI 配置不正确，也能正常工作。

---

**总结：** 大概率是 Spotify Dashboard 中配置了 `https://sports.rucky.cn/` 而不是 `https://sports.rucky.cn/callback`。修改配置即可完美解决。同时我们的代码已经添加了容错逻辑。✅