# WebSocket 403错误解决方案

## 🚨 问题描述
```
WebSocket connection to 'ws://localhost:3003/dji/api/v1/ws?x-auth-token=' failed: 
Error during WebSocket handshake: Unexpected response code: 403
```

## 🔍 原因分析
403错误通常表示认证失败，主要原因包括：
1. **Token缺失**: localStorage中没有有效的认证token
2. **Token过期**: 存储的token已经过期
3. **Token格式错误**: token格式不正确或损坏
4. **服务器配置**: 服务器端认证配置问题

## ✅ 解决步骤

### 1. 使用调试工具诊断
在浏览器控制台运行：
```javascript
debugWebSocketToken()
```

### 2. 检查Token状态
调试工具会显示：
- ✅ 所有localStorage中的token
- 🔍 当前使用的token信息
- ⏰ JWT token的过期时间
- 💡 针对性的修复建议

### 3. 根据诊断结果修复

#### 情况1: 没有Token
```javascript
// 解决方案：重新登录系统
// 或手动设置测试token（仅用于测试）
localStorage.setItem('x-auth-token', 'your-valid-token-here')
```

#### 情况2: Token已过期
```javascript
// 解决方案：重新登录获取新token
// 或清除过期token后重新登录
localStorage.removeItem('x-auth-token')
// 然后重新登录
```

#### 情况3: Token存在但连接失败
```javascript
// 尝试重新连接
dualWebSocketManager.reconnectPrimary()
```

### 4. 验证修复结果
```javascript
// 测试连接
dualWebSocketManager.getConnectionStatus()
```

## 🛠️ 可用的调试命令

### 基本诊断
```javascript
debugWebSocketToken()              // 诊断token状态
```

### 连接管理
```javascript
dualWebSocketManager.reconnectPrimary()     // 重连主WebSocket
dualWebSocketManager.getConnectionStatus()  // 查看连接状态
```

### Token管理（谨慎使用）
```javascript
// 查看当前token
localStorage.getItem('x-auth-token')

// 设置测试token（仅用于测试）
localStorage.setItem('x-auth-token', 'test-token')

// 清除token
localStorage.removeItem('x-auth-token')
```

## 🔧 预防措施

### 1. 自动Token刷新
系统应实现token自动刷新机制，在token即将过期时自动获取新token。

### 2. 连接状态监控
```javascript
// 监听连接状态变化
EventBus.on('WebSocket-ConnectionError', (error) => {
  if (error.code === 403) {
    // 处理认证失败
    console.log('认证失败，请重新登录')
  }
})
```

### 3. 优雅降级
当WebSocket连接失败时，系统应提供适当的用户提示和替代方案。

## 📋 常见问题

### Q: 为什么token存在但仍然403？
A: 可能原因：
- Token已过期
- Token格式不正确
- 服务器端认证配置变更
- 网络环境问题

### Q: 如何获取有效的token？
A: 
1. 通过正常的登录流程
2. 检查登录接口的响应
3. 确保token正确存储到localStorage

### Q: 开发环境下如何测试？
A: 
1. 使用调试工具诊断
2. 手动设置测试token
3. 监控WebSocket连接日志

## 🚀 最佳实践

1. **定期检查Token**: 实现定时检查token有效性
2. **错误处理**: 完善的WebSocket错误处理机制
3. **用户体验**: 提供清晰的错误提示和解决建议
4. **日志记录**: 详细的连接和认证日志
5. **监控告警**: 连接失败时的监控和告警机制

## 📞 技术支持

如果上述方法无法解决问题，请：
1. 收集完整的错误日志
2. 提供token诊断结果
3. 检查网络环境和服务器状态
4. 联系系统管理员进行服务器端排查