# ✅ 修复 Redirect URI 不匹配问题

## 🐛 问题

遇到错误：
```
INVALID_CLIENT: Invalid redirect URI
```

授权 URL 中的 redirect_uri 是：
```
https://sports.rucky.cn/music-rhythm
```

但在 Spotify Dashboard 中配置的是：
```
https://sports.rucky.cn/
```

## 🔍 原因分析

之前代码使用了：
```typescript
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**

```typescript
// 修改前
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/`
- ❌ 其他子路径

## ✨ 优势

1. **简单配置**
   - 只需一个 Redirect URI
   - 不需要为每个路由配置

2. **避免错误**
   - 不会出现 redirect_uri 不匹配
   - 代码更稳定

3. **更好的用户体验**
   - 授权后自动返回原页面
   - 流程更流畅

## 🧪 测试步骤

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

## 📄 修改的文件

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

## 🎯 现在可以正常使用了

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

```bash
npm run build
# 或
npm run dev
```

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