✅ 修复 Redirect URI 不匹配问题

🐛 问题

遇到错误：

INVALID_CLIENT: Invalid redirect URI

授权 URL 中的 redirect_uri 是：

https://sports.rucky.cn/music-rhythm

但在 Spotify Dashboard 中配置的是：

https://sports.rucky.cn/

🔍 原因分析

之前代码使用了：

const REDIRECT_URI = window.location.origin + window.location.pathname

当访问 /music-rhythm 路由时，window.location.pathname 是 /music-rhythm，导致 redirect_uri 变成了 https://sports.rucky.cn/music-rhythm，这个地址没有在 Spotify Dashboard 中配置。

✅ 解决方案

修改内容

1. 固定使用根路径作为 Redirect URI

// 修改前
const REDIRECT_URI = window.location.origin + window.location.pathname

// 修改后 ✅
const REDIRECT_URI = window.location.origin + '/'

2. 添加授权回调处理

在 Home.vue 中检测 Spotify 回调
自动跳转回音乐律动页面
保持用户体验流畅

工作流程

用户在 /music-rhythm 点击授权
  ↓
保存返回路径到 localStorage
  ↓
跳转到 Spotify 授权页面 (redirect_uri=/)
  ↓
用户授权
  ↓
返回到根路径 /
  ↓
Home.vue 检测到回调
  ↓
自动跳转到 /music-rhythm
  ↓
MusicRhythm.vue 处理 token
  ↓
授权完成！

📝 Spotify Dashboard 配置

只需配置根路径：

开发环境：

http://localhost:5173/

生产环境：

https://sports.rucky.cn/

⚠️ 不要添加：

❌ https://sports.rucky.cn/music-rhythm
❌ https://sports.rucky.cn/music-rhythm/
❌ 其他子路径

✨ 优势

简单配置
- 只需一个 Redirect URI
- 不需要为每个路由配置
避免错误
- 不会出现 redirect_uri 不匹配
- 代码更稳定
更好的用户体验
- 授权后自动返回原页面
- 流程更流畅

🧪 测试步骤

确保 Spotify Dashboard 中只配置了根路径
重新构建应用：
```
npm run build
```
访问音乐律动页面
点击"连接 Spotify 账号"
授权后应该自动返回音乐律动页面
检查是否成功授权

📄 修改的文件

✅ src/views/MusicRhythm.vue - 固定 redirect_uri，添加状态保存
✅ src/views/Home.vue - 添加回调检测和自动跳转
✅ SPOTIFY_SETUP.md - 更新配置说明

🎯 现在可以正常使用了

重新构建后，授权流程应该能正常工作：

npm run build
# 或
npm run dev

访问应用，点击授权，享受音乐吧！🎵

2.6 KiB Raw Permalink Blame History Unescape Escape