在前端開發中，經常會遇到 Token續約 的問題。對 Token 實現無縫刷新從而維護用戶的登錄狀態無論是在開發時，還是在 面試時都是至關重要的。所以說咱們今天就來看看 Token 的無縫刷新問題。s1U28資訊網——每日最新資訊28at.com

s1U28資訊網——每日最新資訊28at.com

一、前端無縫刷新令牌的原理

1、令牌過期

服務器為每個令牌設置一個過期時間，通常是30分鐘或1小時。在這段時間內，用戶可以使用令牌來訪問受保護的資源。s1U28資訊網——每日最新資訊28at.com

2、定期檢查

前端應用程序在用戶活動期間定期檢查令牌的有效性。通常通過輪詢或心跳機制實現，即定期向服務器發送請求，以驗證令牌的有效性。s1U28資訊網——每日最新資訊28at.com

3、令牌刷新

如果服務器指示令牌已過期，前端應用程序立即使用refreshToken向身份驗證服務器發送新請求，以獲取新的訪問令牌。無縫過渡：在接收到新令牌后，前端應用程序會更新本地存儲的令牌，并繼續以前的操作，完全不受影響。s1U28資訊網——每日最新資訊28at.com

4、示例

下面是一個簡單的示例，演示如何在前端實現無縫刷新令牌：s1U28資訊網——每日最新資訊28at.com

令牌過期：假設服務器為每個令牌設置了30分鐘的過期時間。s1U28資訊網——每日最新資訊28at.com

定期檢查：前端應用程序每5分鐘向服務器發送一次請求，檢查當前令牌的有效性。s1U28資訊網——每日最新資訊28at.com

// 使用setInterval定期發送心跳請求setInterval(() => {  checkTokenValidity();}, 5 * 60 * 1000); // 5 分鐘

檢查令牌有效性：前端應用程序向服務器發送心跳請求以驗證令牌的有效性。s1U28資訊網——每日最新資訊28at.com

async function checkTokenValidity() {  try {    const response = await fetch('/api/heartbeat', {      headers: {        Authorization: `Bearer ${localStorage.getItem('token')}`      }    });    if (!response.ok) {      // Token expired, initiate token refresh      refreshToken();    }  } catch (error) {    // Handle errors    console.error('Error checking token validity:', error);  }}

令牌刷新：如果令牌過期了，前端應用程序會向身份驗證服務器發送請求，以獲取一個新的訪問令牌。s1U28資訊網——每日最新資訊28at.com

async function refreshToken() {  try {    const response = await fetch('/api/auth/refresh', {      method: 'POST',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify({        refreshToken: localStorage.getItem('refreshToken')      })    });    if (response.ok) {      const data = await response.json();      // 更新本地存儲的令牌      localStorage.setItem('accessToken', data.accessToken);    } else {      // 處理令牌刷新失敗      console.error('Failed to refresh token:', response.status);    }  } catch (error) {    // 處理錯誤    console.error('Error refreshing token:', error);  }}

在這個例子中，前端應用程序通過定期檢查令牌的有效性并在需要時發起刷新，從而無縫刷新令牌，確保了用戶體驗的流暢性。需要注意的是，出于安全原因，令牌刷新也應該有一個過期時間，并且在過期后用戶可能需要重新登錄。s1U28資訊網——每日最新資訊28at.com

二、在令牌刷新過程中處理請求

如果在令牌刷新進行中并且新令牌尚未到達時發送額外的請求，可能會遇到以下這種情況：s1U28資訊網——每日最新資訊28at.com

如果服務器檢測到一個過期的令牌，可能會返回401未經授權或類似的錯誤狀態。在這種情況下，你需要捕獲這些錯誤并在捕獲到錯誤時嘗試使用新令牌重新發送請求。s1U28資訊網——每日最新資訊28at.com

為處理這些情況，可以采取以下策略：s1U28資訊網——每日最新資訊28at.com

1、錯誤處理

確保你的應用能夠捕獲和處理 401 Unauthorized 或相關的錯誤。捕獲這些錯誤后，嘗試使用新令牌重新發送請求。s1U28資訊網——每日最新資訊28at.com

2、請求重試機制

實現一個請求重試機制，自動或手動重新嘗試使用新令牌的失敗請求。你可以使用指數退避策略來避免頻繁的重試和減少服務器負載。s1U28資訊網——每日最新資訊28at.com

3、狀態管理

在令牌刷新期間，將應用程序狀態設置為“刷新令牌”，并防止新請求，直到獲得新令牌為止。這可以防止使用無效令牌發送更多的請求。s1U28資訊網——每日最新資訊28at.com

4、請求排隊

在令牌過期后，將請求排隊，等待獲得新令牌后再逐個發送請求。可以使用Promise.all或其他異步處理技術來實現這一點。s1U28資訊網——每日最新資訊28at.com

5、前端通知

在令牌過期后，在前端顯示通知，告知用戶有關正在進行的令牌刷新過程以及需要等待或有可能重新登錄的需要。s1U28資訊網——每日最新資訊28at.com

以下是一個簡化的代碼示例，演示了在捕獲到401錯誤后如何使用新令牌重新發送請求。s1U28資訊網——每日最新資訊28at.com

假設這是你的API請求函數：s1U28資訊網——每日最新資訊28at.com

async function apiRequest(url, token) {  try {    const response = await fetch(url, {      headers: {        Authorization: `Bearer ${token}`      }    });    if (!response.ok) {      throw new Error(`Request failed with status ${response.status}`);    }    return response.json();  } catch (error) {    if (error.message.includes('401') && newToken) {      // 嘗試使用新令牌重新發送請求      return apiRequest(url, newToken);    }    throw error;  }}// 假設這是你的 token 刷新功能let newToken = null; // 用于存儲新令牌的變量async function refreshToken() {  try {    const response = await fetch('/api/auth/refresh', {      // ... 發送刷新請求的代碼 ...    });    if (response.ok) {      const data = await response.json();      newToken = data.token;    }  } catch (error) {    // 處理錯誤  }}// 當令牌到期時調用此函數async function handleTokenExpiration() {  try {    // 嘗試刷新令牌    await refreshToken();    // 假設這是之前因令牌過期而失敗的請求的數組    const failedRequests = [/* ... */];    // 使用新令牌重新發送請求    for (const request of failedRequests) {      try {        const response = await apiRequest(request.url, newToken);        // 處理響應或更新應用程序狀態      } catch (error) {        // 處理請求重新發送期間的錯誤      }    }  } catch (error) {    // 處理令牌刷新或請求重新發送期間的錯誤  }}

在這個示例中，apiRequest函數檢查 401 錯誤，并在有新令牌時嘗試重新發送請求。handleTokenExpiration函數通過刷新令牌并使用新令牌重新發送先前失敗的請求來處理令牌過期問題。s1U28資訊網——每日最新資訊28at.com

三、排隊請求

請求排隊的實現依賴于使用隊列數據結構來管理待處理請求。當由于某些條件（例如，令牌過期）需要延遲處理請求時，請求將被添加到隊列中，等待條件滿足（例如，獲取新令牌）后再進行處理。s1U28資訊網——每日最新資訊28at.com

下面是一個簡單的示例，演示了如何實現請求排隊：s1U28資訊網——每日最新資訊28at.com

1、創建一個請求隊列

首先，你需要一個隊列來存儲待處理的請求。這個隊列可以是一個數組，內存中的鏈表，或者使用現有的隊列庫（例如JavaScript中的Array.prototype.queue或queue-promise）。s1U28資訊網——每日最新資訊28at.com

let requestQueue = []; // 使用數組作為簡單的隊列實現

2、排隊操作

當請求需要延遲時，請將其添加到隊列的末尾。s1U28資訊網——每日最新資訊28at.com

function enqueueRequest(request) {  requestQueue.push(request);}

3、出隊操作

當滿足條件時（例如，獲取新令牌），將請求從隊列前端出隊進行處理，并重復直到隊列為空。s1U28資訊網——每日最新資訊28at.com

async function dequeueAndProcessRequests() {  while (requestQueue.length > 0) {    const request = requestQueue.shift(); // 從隊列前面撤回請求    try {      const response = await processRequest(request); // 處理該請求      // 處理響應或更新應用程序狀態    } catch (error) {      // 處理請求處理期間的錯誤      console.error('Error processing request:', error);    }  }

4、處理請求

該 processRequest 函數處理實際的請求處理邏輯，例如發送 HTTP 請求或更新 UI。s1U28資訊網——每日最新資訊28at.com

async function processRequest(request) {  // 實際請求處理邏輯，例如發送HTTP請求  const response = await fetch(request.url, {    headers: {      Authorization: `Bearer ${newToken}` // 使用新的 token    }  });  return response.json(); // 返回處理結果}

5、使用示例

當令牌過期時，將需要延遲的請求排隊，然后嘗試刷新令牌。獲得新令牌后，將請求從隊列中出列并處理它們。s1U28資訊網——每日最新資訊28at.com

// 假設這是由于令牌過期而需要延遲的請求const delayedRequest = { url: '/api/data' };// 將請求排隊enqueueRequest(delayedRequest);// 嘗試刷新令牌await refreshToken();// 處理隊列中的請求await dequeueAndProcessRequests();

s1U28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-84014-0.html前端實現無縫刷新 Token

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 金三銀四！分享度小滿的前端面經，考Vue考的比較多

下一篇： 入門實戰，Dioxus Rust 用戶界面開發框架，哇真香！