Token無感知刷新前端
思路
Token無感知刷新是一種常見的技術，就是在用戶無感知的情況下自動處理Token過期的問題，避免用戶因Token過期而被迫重新登錄。以下是實現Token無感知刷新的主要步驟和考慮因素：
一、Token生成與存儲
- Token生成：
- 在用戶登錄成功后，后端會生成兩個Token：一個AccessToken（用于訪問受保護的API，過期時間較短）和一個RefreshToken（用于獲取新的AccessToken，過期時間較長）。
- 可以使用JWT（JSON Web Tokens）或其他安全機制來生成和驗證Token。
- Token存儲：
將AccessToken和RefreshToken存儲在客戶端的本地緩存中，如localStorage或sessionStorage。
確保RefreshToken的安全性，避免在客戶端以明文形式暴露。
二、請求攔截器設置
- 請求攔截器：
- 在發送請求之前，通過請求攔截器檢查AccessToken是否存在并未過期。
- 如果AccessToken存在且未過期，則將其添加到請求的Authorization頭部。
- 如果AccessToken不存在或已過期，則嘗試使用RefreshToken獲取新的AccessToken。
- 響應攔截器：
在接收到響應后，通過響應攔截器檢查響應狀態碼。
如果狀態碼為401（未授權），則表明AccessToken已過期，此時應使用RefreshToken嘗試獲取新的AccessToken。
如果狀態碼為200（成功）或其他有效狀態碼，則直接處理響應數據。
三、Token刷新邏輯
- 檢查Token是否過期：
- 可以在請求攔截器中檢查AccessToken的過期時間，但這需要后端提供Token的過期時間字段，且存在本地時間被篡改的風險。
- 更推薦的做法是在響應攔截器中根據狀態碼（如401）來判斷AccessToken是否過期。
- 使用RefreshToken獲取新Token：
當檢測到AccessToken過期時，使用RefreshToken向認證服務器發送請求以獲取新的AccessToken和（可選的）新的RefreshToken。
將新獲取的AccessToken保存到本地緩存，并替換掉舊的AccessToken。
重新發送請求：
使用新的AccessToken重新發送之前因Token過期而失敗的請求。
這可能需要將失敗的請求暫存起來，并在獲取到新Token后依次重新發送。
四、防止多次刷新Token
- 設置一個標志位（如isRefreshing）來指示當前是否正在刷新Token。
- 如果在刷新Token的過程中又收到了需要刷新Token的請求，則可以直接使用已獲取的（或正在獲取的）新Token，而不是再次發起刷新Token的請求。
實現
前端實現Token無感知刷新的過程主要涉及到對HTTP請求的攔截、Token狀態的判斷、Token的刷新以及請求的重發等步驟。以下是一個詳細的實現流程：
一、Token的獲取與存儲
- 用戶登錄：
- 用戶輸入用戶名和密碼進行登錄。
- 登錄成功后，后端服務器會生成一個AccessToken（短期Token）和一個RefreshToken（長期Token），并將它們返回給前端。
- 存儲Token：
前端將AccessToken和RefreshToken存儲在瀏覽器的本地緩存中，如localStorage或sessionStorage。由于localStorage具有持久性，更適合存儲RefreshToken；而sessionStorage在頁面會話結束時會被清除，適合存儲AccessToken（但考慮到需要跨會話保持登錄狀態，通常也會選擇localStorage）。
二、請求攔截器的設置
- 創建Axios實例：
- 使用Axios等HTTP客戶端庫創建一個Axios實例，并配置基礎URL、請求超時時間等。
- 設置請求攔截器：
在發送請求之前，通過請求攔截器檢查localStorage中是否存儲了有效的AccessToken。
如果存在，則將AccessToken添加到請求的Authorization頭部。
設置響應攔截器：
在接收到響應后，通過響應攔截器檢查響應狀態碼。
如果狀態碼為401（未授權），則表明AccessToken已過期，此時需要嘗試使用RefreshToken刷新Token。
三、Token刷新邏輯
- 檢查Token是否過期：
- 響應攔截器中，根據狀態碼401判斷AccessToken是否過期。注意，更準確的做法是在響應體中包含Token過期的具體信息，但這里以狀態碼為例。
- 使用RefreshToken獲取新Token：
發起一個POST請求到認證服務器，將RefreshToken作為請求體或請求頭發送給后端。
后端驗證RefreshToken的有效性，并返回一個新的AccessToken（和可選的新的RefreshToken）。
前端接收到新的AccessToken后，將其保存到localStorage中，并替換掉舊的AccessToken。
重新發送請求：
使用新的AccessToken重新發送之前因Token過期而失敗的請求。
這可以通過將失敗的請求暫存起來，并在獲取到新Token后依次重新發送來實現。
四、防止多次刷新Token
- 在刷新Token的過程中，設置一個標志位（如isRefreshing）來指示當前是否正在刷新Token。
- 如果在刷新Token的過程中又收到了需要刷新Token的請求，則可以直接使用已獲取的（或正在獲取的）新Token，而不是再次發起刷新Token的請求。
五、代碼示例（簡化版）
由于篇幅限制，這里只提供一個簡化的代碼示例框架：
import axios from 'axios';
// 創建axios實例
const service = axios.create({
baseURL: 'http://your-api-url', // API的base_url
timeout: 5000 // 請求超時時間
});
// 請求攔截器
service.interceptors.request.use(
config => {
// 從localStorage獲取token，并設置到請求頭中
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 處理請求錯誤
console.error('請求錯誤:', error); // for debug
Promise.reject(error);
}
);
// 響應攔截器
service.interceptors.response.use(
response => {
// 對響應數據做點什么
return response.data;
},
error => {
// 處理響應錯誤
if (error.response && error.response.status === 401) {
// 嘗試使用RefreshToken刷新Token
return refreshToken().then(newToken => {
// 設置新的Token并重新發送請求
localStorage.setItem('token', newToken);
// 這里需要實現請求重發的邏輯，可以通過修改Axios實例的配置或使用其他方式
}).catch(err => {
// 刷新Token失敗，可能需要用戶重新登錄
console.error('刷新Token失敗:', err);
});
}
return Promise.reject(error);
}
);
// 刷新Token的函數（需要實現）
function refreshToken() {
// 發送請求到認證服務器獲取新的Token
// 返回Promise，解析為新的Token
}上述代碼示例是一個簡化的框架，實際實現時需要根據具體業務需求和后端API進行相應的調整和完善。特別是刷新Token的函數
