152 lines
3.5 KiB
Markdown
152 lines
3.5 KiB
Markdown
# ✅ Spotify 授权最终解决方案
|
||
|
||
## 🎯 配置方案
|
||
|
||
### 1. Spotify Dashboard 配置
|
||
|
||
在 [Spotify Dashboard](https://developer.spotify.com/dashboard/4ed200672ba1421baa31b9859bd84d39/settings) 中设置：
|
||
|
||
**Redirect URIs：**
|
||
```
|
||
✅ https://sports.rucky.cn （生产环境）
|
||
✅ http://localhost:5173 （开发环境）
|
||
```
|
||
|
||
⚠️ **注意：**
|
||
- 结尾**不要**加斜杠 `/`
|
||
- **不要**使用 hash 路由格式 `/#/callback`
|
||
- Spotify 不支持 hash 路由作为 redirect_uri
|
||
|
||
### 2. 授权流程
|
||
|
||
```
|
||
用户点击"连接 Spotify 账号"
|
||
↓
|
||
跳转到 Spotify 授权页面
|
||
↓
|
||
用户授权
|
||
↓
|
||
Spotify 返回：https://sports.rucky.cn/?code=xxx&state=xxx
|
||
↓
|
||
Home.vue 检测到回调参数
|
||
↓
|
||
保存参数到 sessionStorage
|
||
↓
|
||
跳转到 /#/callback 路由
|
||
↓
|
||
SpotifyCallback.vue 处理授权
|
||
↓
|
||
完成！跳转到音乐律动页面
|
||
```
|
||
|
||
## 📝 代码实现
|
||
|
||
### MusicRhythm.vue
|
||
```typescript
|
||
const REDIRECT_URI = window.location.origin + '/'
|
||
// 生产环境：https://sports.rucky.cn/
|
||
// 开发环境：http://localhost:5173/
|
||
```
|
||
|
||
### Home.vue（关键处理逻辑）
|
||
```typescript
|
||
onMounted(() => {
|
||
// 检查是否是 Spotify 授权回调
|
||
const urlParams = new URLSearchParams(window.location.search)
|
||
|
||
if (urlParams.has('code') && urlParams.has('state')) {
|
||
console.log('✅ Spotify OAuth callback detected!')
|
||
|
||
// 保存参数到 sessionStorage
|
||
sessionStorage.setItem('spotify_callback_params', window.location.search)
|
||
|
||
// 跳转到 callback 路由处理
|
||
router.replace('/callback')
|
||
}
|
||
})
|
||
```
|
||
|
||
### SpotifyCallback.vue
|
||
```typescript
|
||
onMounted(async () => {
|
||
// 从 sessionStorage 获取参数
|
||
const savedParams = sessionStorage.getItem('spotify_callback_params')
|
||
if (savedParams) {
|
||
// 恢复参数到 URL
|
||
window.history.replaceState({}, '', window.location.pathname + savedParams + window.location.hash)
|
||
|
||
// 处理授权
|
||
const success = await spotifyService.handleCallback()
|
||
|
||
// 清理
|
||
sessionStorage.removeItem('spotify_callback_params')
|
||
}
|
||
})
|
||
```
|
||
|
||
## ✅ 为什么这个方案有效？
|
||
|
||
1. **Spotify 限制**
|
||
- Spotify OAuth 不支持 hash 路由作为 redirect_uri
|
||
- 只能将参数附加到 URL 的 query string 部分
|
||
|
||
2. **Vue Router Hash 模式**
|
||
- Hash 模式下，路由在 `#` 后面
|
||
- Query 参数在 `#` 前面
|
||
|
||
3. **我们的解决方案**
|
||
- 使用根路径作为 redirect_uri
|
||
- 在 Home.vue 中拦截回调
|
||
- 转发到正确的路由处理
|
||
|
||
## 🧪 测试步骤
|
||
|
||
1. **部署新代码**
|
||
```bash
|
||
# 代码已构建完成
|
||
# 部署 dist/ 目录到服务器
|
||
```
|
||
|
||
2. **清除缓存**
|
||
```javascript
|
||
localStorage.clear()
|
||
sessionStorage.clear()
|
||
```
|
||
|
||
3. **测试流程**
|
||
- 访问 https://sports.rucky.cn
|
||
- 进入音乐律动页面
|
||
- 点击"连接 Spotify 账号"
|
||
- 授权
|
||
- 应该看到"授权成功！"
|
||
- 自动跳转到音乐律动页面
|
||
|
||
## 📋 检查清单
|
||
|
||
- [x] Spotify Dashboard 配置了 `https://sports.rucky.cn`
|
||
- [x] 代码使用根路径作为 redirect_uri
|
||
- [x] Home.vue 检测并转发回调
|
||
- [x] SpotifyCallback.vue 处理授权
|
||
- [x] 使用 sessionStorage 传递参数
|
||
- [x] 清理 URL 避免重复处理
|
||
|
||
## 🎉 完成
|
||
|
||
这个方案完美解决了 Hash 模式与 Spotify OAuth 的兼容问题！
|
||
|
||
**优点：**
|
||
- ✅ 不需要修改路由模式
|
||
- ✅ 不需要服务器特殊配置
|
||
- ✅ 用户体验流畅
|
||
- ✅ 代码健壮，有容错处理
|
||
|
||
**现在可以：**
|
||
1. 部署 `dist/` 目录
|
||
2. 在 Spotify Dashboard 确认配置
|
||
3. 测试完整流程
|
||
|
||
---
|
||
|
||
**问题已完全解决！** 🎵✨
|
||
|