Initial commit

WEBSOCKET_403_SOLUTION.md

@@ -0,0 +1,139 @@
+# 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. 联系系统管理员进行服务器端排查