電商儀表板文檔

主題

Router Session 優化報告 ​

🔍 診斷結果 ​

發現的主要問題 ​

  1. Router Guard 阻塞等待

    • 最長等待時間：3秒
    • 每50ms檢查一次認證狀態
    • 額外的權限檢查等待

  2. 認證狀態監聽器重複操作

    • 多重狀態更新
    • 同步操作執行次數過多
    • 沒有防重複機制

  3. 登出流程沒有用戶反饋

    • 用戶點擊後沒有載入狀態
    • 等待後端響應才跳轉

  4. 缺乏快取機制

    • 重複的用戶資料請求
    • 沒有本地快取

優化方案 ​

1. Router Guard 優化 ​

原本問題：

typescript
// 最長等待3秒！
await new Promise<void>((resolve) => {
  const maxWaitTime = 3000
  // 每50ms檢查一次
  setTimeout(checkLoading, 50)
})

優化後：

typescript
// 最多等待500ms，避免長時間卡頓
await Promise.race([
  waitForAuth(),
  new Promise<void>((resolve) => setTimeout(resolve, 500)),
])

2. 登出流程優化 ​

原本問題：

typescript
const handleSignOut = async () => {
  const result = await auth.signOut() // 用戶感覺卡頓
  if (result.success) {
    router.push({ name: 'login' })
  }
}

優化後：

typescript
const handleSignOut = async () => {
  isSigningOut.value = true // 即時視覺反饋

  // 立即跳轉，背景執行登出
  router.push({ name: 'login' })
  await auth.signOut()
}

3. 認證狀態監聽器優化 ​

新增功能：

  • 防重複處理鎖機制
  • 快取機制減少重複請求
  • 立即清除狀態（登出時）
  • 非阻塞式同步操作

4. 快取機制 ​

typescript
const userCache = new Map<string, { user: User; timestamp: number }>()
const CACHE_DURATION = 5 * 60 * 1000 // 5分鐘快取

性能提升 ​

優化項目原本優化後提升
Router Guard 等待時間最長3秒最長500ms83%↑
登出反應時間1-2秒即時100%↑
重複請求無快取5分鐘快取大幅減少
用戶體驗卡頓感流暢顯著提升

實施建議 ​

立即實施（高優先級） ​

  1. 更新 NavUser 組件

    bash
    cp src/components/NavUser-optimized.vue src/components/NavUser.vue

  2. 更新 Router 配置

    bash
    cp src/router/index-optimized.ts src/router/index.ts

後續實施（中優先級） ​

  1. 更新 useAuth composable
    bash
    cp src/composables/useAuth-optimized.ts src/composables/useAuth.ts

測試驗證 ​

  1. 登出流程測試

    • 點擊登出按鈕應立即顯示載入狀態
    • 頁面應立即跳轉至登入頁

  2. 頁面切換測試

    • 認證頁面間切換應無明顯延遲
    • 權限檢查應不阻塞導航

  3. Session 恢復測試

    • 重新整理頁面應快速恢復狀態
    • 不應有長時間的載入畫面

注意事項 ​

  1. 向後兼容性

    • 保持 API 介面不變
    • 確保現有功能正常運作

  2. 錯誤處理

    • 網路錯誤時的優雅降級
    • 認證失敗時的適當提示

  3. 測試覆蓋

    • 更新相關的單元測試
    • 驗證整合測試通過

📈 監控指標 ​

建議監控以下指標來驗證優化效果：

  • 平均頁面切換時間
  • 登出操作完成時間
  • 用戶會話恢復時間
  • API 請求頻率

總結：通過這些優化，預期可以顯著改善用戶在頁面切換和登出時的體驗，消除卡頓和延遲問題。