Token 自動(dòng)更新機制說(shuō)明

概述

本文檔說(shuō)明了如何確保最新的Token自動(dòng)應用到所有API請求中的完整機制。

?? 核心功能

1. 自動(dòng)Token更新方法

updateTokenForAllRequests(newTokenData)

• 功能：更新Token并確保應用到所有后續API請求
• 調用時(shí)機：登錄成功后、Token刷新后
• 自動(dòng)處理：
  • 主Token更新
  • 小七系統Token更新
  • 緩存Token更新
  • 認證信息同步

// 使用示例
userStore.updateTokenForAllRequests(newTokenData);

2. Token刷新機制

refreshAndUpdateToken()

• 功能：從服務(wù)器獲取最新Token并自動(dòng)應用
• 接口：調用 api/auth/GetUserInfo
• 自動(dòng)化：獲取成功后立即更新到所有API請求

// 刷新Token示例
await userStore.refreshAndUpdateToken();

?? 工作流程

graph TD
    A[用戶(hù)登錄/Token更新] --> B[調用updateTokenForAllRequests]
    B --> C[更新主Token]
    B --> D[更新小七Token]
    B --> E[更新緩存Token]
    B --> F[更新認證信息]
    C --> G[HTTP請求攔截器自動(dòng)使用新Token]
    D --> G
    E --> G
    F --> G
    G --> H[所有API請求攜帶最新Token]

? 自動(dòng)應用機制

HTTP請求攔截器 (src/utils/request/index.ts)

requestInterceptors: (config, options) => {
  const userStore = useUserStore();
  
  // ?? 自動(dòng)獲取最新Token
  const { token, xiaoqiToken, authInfo } = userStore;
  
  // ?? 智能Token選擇
  let authToken = token;
  const url = config.url || '';
  if (url.includes('/xiaoqi/')) {
    authToken = xiaoqiToken || token;
  }
  
  // ?? 自動(dòng)應用到請求頭
  headers.Authorization = `Bearer ${finalToken}`;
}

?? 使用場(chǎng)景

1. 登錄后自動(dòng)應用

// 登錄成功后自動(dòng)更新所有API請求的Token
const handleLogin = async (loginForm) => {
  await userStore.login(loginForm);
  // ? Token已自動(dòng)應用到所有后續API請求
};

2. Token過(guò)期自動(dòng)刷新

// Token即將過(guò)期時(shí)自動(dòng)刷新
const checkAndRefreshToken = async () => {
  if (userStore.isTokenExpired) {
    await userStore.refreshToken();
    // ? 新Token已自動(dòng)應用到所有API請求
  }
};

3. 手動(dòng)更新Token

// 手動(dòng)獲取最新Token并應用
const updateToken = async () => {
  await userStore.refreshAndUpdateToken();
  // ? 最新Token已應用到所有API請求
};

?? Token更新日志

更新Token時(shí)會(huì )自動(dòng)輸出詳細日志：

? Token已更新并將應用到所有API請求
?? 新Token信息: {
  hasMainToken: true,
  hasXiaoqiToken: true, 
  hasCacheToken: true,
  tokenPreview: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

??? 安全特性

1. 類(lèi)型安全

• 完整的TypeScript類(lèi)型檢查
• 安全的Token格式轉換

2. 錯誤處理

• 自動(dòng)捕獲Token更新失敗
• 失敗時(shí)的降級處理機制

3. 狀態(tài)同步

• Token更新后立即持久化
• 多Tab頁(yè)面狀態(tài)同步

?? 配置選項

持久化配置

persist: {
  paths: [
    'token',              // ? 主Token持久化
    'xiaoqiToken',        // ? 小七Token持久化
    'cacheXiaoqiToken',   // ? 緩存Token持久化
    'authInfo'            // ? 認證信息持久化
  ]
}

?? 注意事項

1. 自動(dòng)應用：Token更新后會(huì )立即應用到所有后續API請求
2. 持久化：更新的Token會(huì )自動(dòng)保存到localStorage
3. 多Token支持：支持主Token、小七Token、緩存Token的智能選擇
4. 錯誤恢復：Token更新失敗時(shí)會(huì )自動(dòng)觸發(fā)登出流程

現在您的系統具備了完整的Token自動(dòng)更新機制，確保所有API請求都使用最新的認證憑證！