fix(web): prevent unauthorized API calls with null token (#634)

[the-dev-z]

Summary

Fixes race condition where SWR fires API requests before AuthContext completes loading authentication token from localStorage, resulting in Authorization: Bearer null errors.

Problem

When users refresh the page or directly access trader pages:

1. Component renders → SWR evaluates key conditions
2. Immediately fires request → but token still loading from localStorage
3. getAuthHeaders() returns null → request sent with Authorization: Bearer null
4. Backend rejects with "token is malformed: invalid number of segments"

Error Example:

GET /api/account?trader_id=xxxxxx
Authorization: Bearer null
→ {"error": "无效的token: token is malformed: token contains an invalid number of segments"}

Root Cause

SWR key conditions only checked page state, not authentication state:

// ❌ Before: Race condition
const { data: account } = useSWR(
  currentPage === 'trader' && selectedTraderId ? 'account-...' : null,
  () => api.getAccount(...)
)

Solution

Add user && token && checks to all authenticated SWR keys to ensure requests only fire after authentication completes:

// ✅ After: Wait for auth
const { data: account } = useSWR(
  user && token && currentPage === 'trader' && selectedTraderId
    ? 'account-...'
    : null,
  () => api.getAccount(...)
)

Changes

web/src/App.tsx

• ✅ Import useAuth hook from AuthContext
• ✅ Add user && token && to 5 authenticated SWR calls:
  • status (line 92)
  • account (line 104)
  • positions (line 116)
  • decisions (line 128)
  • stats (line 140)

web/src/components/EquityChart.tsx

• ✅ Import useAuth hook from AuthContext
• ✅ Add user && token && to 2 authenticated SWR calls:
  • history (line 37)
  • account (line 47)

Impact

• ✅ Eliminates "Bearer null" errors on page refresh
• ✅ Prevents malformed token errors when accessing trader pages
• ✅ Consistent with existing pattern (traders list already uses this check)
• ✅ No breaking changes - purely additive guard conditions

Testing

• ✅ TypeScript compilation: npx tsc --noEmit
• ✅ Pattern verified against working traders SWR call (App.tsx line 105)
• ✅ Manual testing: refresh trader page no longer shows errors

Fixes #634

Co-Authored-By: Claude [email protected]

---

🎯 Type of Change | 變更類型

• 🐛 Bug fix | 修復 Bug
• ✨ New feature | 新功能
• 💥 Breaking change | 破壞性變更
• 🎨 Code style update | 代碼樣式更新
• ♻️ Refactoring | 重構
• ⚡ Performance improvement | 性能優化

---

🔗 Related Issues | 相關 Issue

• Closes # | 關閉 #
• Related to # | 相關 #

---

🧪 Testing | 測試

Test Environment | 測試環境

• OS | 操作系統: macOS / Linux
• Node Version | Node 版本: 18+
• Browser(s) | 瀏覽器: Chrome / Firefox / Safari

Manual Testing | 手動測試

• Tested in development mode | 開發模式測試通過
• Tested production build | 生產構建測試通過
• Tested on multiple browsers | 多瀏覽器測試通過
• Tested responsive design | 響應式設計測試通過
• Verified no existing functionality broke | 確認沒有破壞現有功能

---

🌐 Internationalization | 國際化

• All user-facing text supports i18n | 所有面向用戶的文本支持國際化
• Both English and Chinese versions provided | 提供了中英文版本
• N/A | 不適用

---

✅ Checklist | 檢查清單

Code Quality | 代碼質量

• Code follows project style | 代碼遵循項目風格
• Self-review completed | 已完成代碼自查
• Comments added for complex logic | 已添加必要註釋
• Code builds successfully | 代碼構建成功 (npm run build)
• Ran npm run lint | 已運行 npm run lint
• No console errors or warnings | 無控制台錯誤或警告

Documentation | 文檔

• Updated relevant documentation | 已更新相關文檔
• Updated type definitions (TypeScript) | 已更新類型定義
• Added JSDoc comments where necessary | 已添加 JSDoc 註釋

Git

• Commits follow conventional format | 提交遵循 Conventional Commits 格式
• Rebased on latest dev branch | 已 rebase 到最新 dev 分支
• No merge conflicts | 無合併衝突

---

By submitting this PR, I confirm | 提交此 PR，我確認：

• I have read the Contributing Guidelines | 已閱讀貢獻指南
• I agree to the Code of Conduct | 同意行為準則
• My contribution is licensed under AGPL-3.0 | 貢獻遵循 AGPL-3.0 許可證

---

🌟 Thank you for your contribution! | 感謝你的貢獻！

[github-actions]

🤖 Advisory Check Results

These are advisory checks to help improve code quality. They won't block your PR from being merged.

📋 PR Information

Title Format: ✅ Good - Follows Conventional Commits
PR Size: 🟢 Small (16 lines: +9 -7)

🔧 Backend Checks

Go Formatting: ⚠️ Needs formatting

Files needing formatting

api/server.go
decision/engine.go
logger/telegram_sender.go
mcp/client.go
trader/aster_trader.go
trader/auto_trader.go
trader/binance_futures.go
trader/hyperliquid_trader.go

Go Vet: ✅ Good
Tests: ✅ Passed

Fix locally:

go fmt ./...      # Format code
go vet ./...      # Check for issues
go test ./...     # Run tests

⚛️ Frontend Checks

Build & Type Check: ✅ Success

Fix locally:

cd web
npm run build  # Test build (includes type checking)

---

📖 Resources

• Contributing Guidelines
• Migration Guide

Questions? Feel free to ask in the comments! 🙏

---

These checks are advisory and won't block your PR from being merged. This comment is automatically generated from pr-checks-run.yml.

[xqliu]

代码审查报告 - PR #669

审查结果：✅ 通过（安全增强）

业务层面审查

✅ 需求验证

• 需求明确：防止null token的未授权API调用（Issue [BUG]编辑交易员界面，获取余额失败 #634）
• 安全问题：用户未登录时仍然调用需要认证的API
• 需求合理：只有登录用户才应该调用认证API

✅ 功能完整性

• App.tsx中5个SWR调用添加token检查
• EquityChart.tsx中2个SWR调用添加token检查
• 所有需要认证的API调用都被保护

技术层面审查

✅ 问题分析

安全漏洞：

// Before - 未检查认证状态
const { data: status } = useSWR<SystemStatus>(
  currentPage === 'trader' && selectedTraderId
    ? `status-${selectedTraderId}`
    : null,
  () => api.getStatus(selectedTraderId),
  { refreshInterval: 10000 }
)

// 问题：
// 1. 即使 token = null，仍然会调用 API
// 2. 后端收到 null token，返回 401
// 3. 前端无限重试（refreshInterval: 10000）
// 4. 产生大量无效请求 ❌

影响：

• 浪费网络资源
• 产生无意义的401错误日志
• 可能触发后端限流
• 用户体验差（控制台报错）

✅ 解决方案

添加认证检查：

// After - 添加 user && token 检查
const { data: status } = useSWR<SystemStatus>(
  user && token && currentPage === 'trader' && selectedTraderId
    ? `status-${selectedTraderId}`
    : null,
  () => api.getStatus(selectedTraderId),
  { refreshInterval: 10000 }
)

工作原理：

1. SWR key为null时，不会调用fetcher函数
2. user && token 确保用户已登录
3. 未登录时，key = null，不会发起API请求
4. 登录后，key变为有效值，开始请求数据

✅ 修改覆盖

App.tsx (5处修改)：

1. status - 系统状态
2. account - 账户信息
3. positions - 持仓列表
4. decisions - 决策记录
5. stats - 统计信息

EquityChart.tsx (2处修改)：

1. history - 权益历史
2. account - 账户信息

总计：7个需要认证的API调用全部保护 ✅

E2E 验证报告

✅ 测试场景1：未登录用户

状态：user = null, token = null
页面：trader页面

预期：
- 不发起任何API请求
- 无401错误
- 控制台干净

实际：✅ 符合预期

✅ 测试场景2：登录用户

状态：user = {...}, token = "xxx"
页面：trader页面

预期：
- 正常发起API请求
- 获取数据成功
- 数据正常显示

实际：✅ 符合预期

✅ 测试场景3：登出场景

操作：
1. 用户已登录，数据正常显示
2. 用户点击登出

预期：
- token清除后，停止API轮询
- 不再发起新的请求
- 页面跳转到登录页

实际：✅ 符合预期（SWR key变为null）

✅ 测试场景4：Token过期

状态：token过期
操作：页面刷新

预期：
- 不发起API请求（因为认证流程会先清除token）
- 重定向到登录页
- 无无效请求

实际：✅ 符合预期（配合PR #685的HttpClient）

代码质量审查

✅ 一致性

所有检查都使用相同模式：

user && token && otherConditions ? key : null

顺序正确：

• 先检查认证状态（user && token）
• 再检查业务条件（currentPage, selectedTraderId）

✅ SWR最佳实践

条件请求：

// ✅ 正确：使用 null key 阻止请求
useSWR(
  shouldFetch ? key : null,
  fetcher
)

// ❌ 错误：在 fetcher 中检查
useSWR(
  key,
  () => shouldFetch ? api.get() : null  // 仍会调用 fetcher
)

本PR采用：✅ 正确模式

✅ 性能优化

减少无效请求：

• Before: 可能每10秒发送7个401请求
• After: 未登录时，0个请求

网络流量节省：

• 7个API × 10秒间隔 × 60秒 = 42个请求/分钟
• 节省100%无效请求

安全审查

✅ 认证保护

防御层级：

1. 前端层（本PR）：阻止未授权请求
2. 网络层（PR fix: 修复token过期未重新登录的问题 #685）：HttpClient拦截401
3. 后端层：验证token有效性

纵深防御 ✅

✅ 防止信息泄露

Before：

• 未登录用户可能看到401错误细节
• 控制台可能暴露API端点

After：

• 未登录用户不会触发API调用
• 无错误信息泄露

✅ 符合最小权限原则

• 未登录 → 无API调用权限
• 已登录 → 仅调用授权API

🟡 改进建议（非 BLOCKING）

建议1：提取认证检查Hook

// src/hooks/useAuthenticatedSWR.ts
export function useAuthenticatedSWR<T>(
  key: string | null,
  fetcher: () => Promise<T>,
  options?: SWRConfiguration
) {
  const { user, token } = useAuth()
  
  return useSWR<T>(
    user && token && key ? key : null,
    fetcher,
    options
  )
}

// 使用
const { data: status } = useAuthenticatedSWR(
  currentPage === 'trader' && selectedTraderId
    ? `status-${selectedTraderId}`
    : null,
  () => api.getStatus(selectedTraderId),
  { refreshInterval: 10000 }
)

优点：

• DRY（Don't Repeat Yourself）
• 集中管理认证逻辑
• 更容易维护

建议2：添加loading状态

const { data, error, isLoading } = useAuthenticatedSWR(...)

if (!user || !token) {
  return <LoginPrompt />
}

if (isLoading) {
  return <Skeleton />
}

if (error) {
  return <ErrorMessage />
}

return <DataDisplay data={data} />

建议3：添加TypeScript类型守卫

function isAuthenticated(user: User | null, token: string | null): user is User {
  return user !== null && token !== null
}

// 使用
const { user, token } = useAuth()

if (!isAuthenticated(user, token)) {
  return <LoginPrompt />
}

// TypeScript知道这里 user 一定不是 null
const { data } = useSWR(`status-${user.id}`, ...)

建议4：添加单元测试

describe('API authentication checks', () => {
  it('does not call API when user is not logged in', () => {
    const mockFetcher = jest.fn()
    
    renderHook(() => 
      useSWR(
        user && token && condition ? key : null,
        mockFetcher
      ),
      { wrapper: createWrapper({ user: null, token: null }) }
    )
    
    expect(mockFetcher).not.toHaveBeenCalled()
  })
  
  it('calls API when user is logged in', () => {
    const mockFetcher = jest.fn()
    
    renderHook(() => 
      useSWR(
        user && token && condition ? key : null,
        mockFetcher
      ),
      { wrapper: createWrapper({ user: {...}, token: 'xxx' }) }
    )
    
    expect(mockFetcher).toHaveBeenCalled()
  })
})

与其他PR的配合

与PR #685配合

PR #685：HttpClient层拦截401
PR #669：前端层防止发送未授权请求

协同效果：

1. PR #669阻止大部分未授权请求（前端）
2. PR #685处理漏网之鱼（网络层）
3. 双重保护，更安全

总结

这是一个重要的安全增强 PR：

优点

1. ✅ 修复安全问题（Issue [BUG]编辑交易员界面，获取余额失败 #634）
2. ✅ 防止未授权API调用
3. ✅ 减少无效网络请求（性能优化）
4. ✅ 改善用户体验（无401错误）
5. ✅ 修改一致（所有认证API都检查）
6. ✅ 符合SWR最佳实践

改进空间（非 BLOCKING）

1. ⚠️ 提取useAuthenticatedSWR Hook（DRY）
2. ⚠️ 添加loading状态处理
3. ⚠️ TypeScript类型守卫
4. ⚠️ 添加单元测试

审查结论：✅ 通过，建议合并

重要性：

• 修复安全漏洞
• 优化网络性能
• 改善用户体验
• 与PR #685配合形成完整的认证保护

影响范围：

• 所有需要认证的API调用
• 低风险（只是添加条件检查）
• 无破坏性更改

[the-dev-z]

已修復 go fmt 格式問題 ✅

可以合併了嗎？謝謝！🙏

[tangmengqiu]

Please resolve the conflict, thanks @zhouyongyou

[the-dev-z]

Closing in favor of #880 - a clean rebuild from the latest dev branch without merge conflicts.