AJAX統一攔截token過期刷新是前端開發中常用的一種技術手段。當用戶登錄后,服務器會生成一個token,并將該token返回給前端。前端通過AJAX請求攜帶該token進行后續的操作,但是token有時效性,一段時間后會過期。在過期前,我們需要在發起AJAX請求時檢測token的有效性,當發現token已過期時,可以通過刷新token的方式繼續進行操作。這種機制可以有效地保證用戶在一段時間內持續使用系統而不需要頻繁地重新登錄。
假設我們正在開發一個社交媒體應用,用戶在登錄后可以發布動態、評論等操作。服務器返回的token有一個有效期為1小時,過期后需要刷新token后才能繼續操作。在前端代碼中,我們可以使用 AJAX 統一攔截的方式來處理這一問題。
首先,我們可以定義一個 AJAX 攔截器函數,用于攔截所有 AJAX 請求,并檢查 token 是否過期。當我們發送 AJAX 請求時,攔截器會在請求之前被觸發。在攔截器函數中,我們可以判斷當前 token 的有效期是否已過期。如果 token 過期,則需要刷新 token 并更新到本地存儲中,然后繼續發起原本的 AJAX 請求。下面是使用 jQuery 的代碼示例:
$.ajaxSetup({ beforeSend: function(xhr) { var token = localStorage.getItem('token'); if (token) { // 檢查 token 是否過期 var expiration = localStorage.getItem('expiration'); if (expiration && new Date(expiration) < new Date()) { refresh_token(); // 刷新 token token = localStorage.getItem('token'); // 更新 token } xhr.setRequestHeader('Authorization', 'Bearer ' + token); } } });
在上述代碼中,我們使用了 jQuery 的ajaxSetup
方法,該方法用于設置全局 AJAX 默認選項。 我們在beforeSend
回調函數中進行 token 的過期檢測和刷新。如果 token 過期,會調用refresh_token
函數來刷新 token,并更新到本地存儲中。然后,我們通過setRequestHeader
方法將更新后的 token 添加到請求頭。
為了演示代碼的作用,我們將刷新 token 的邏輯獨立成一個函數:
function refresh_token() { $.ajax({ url: '/refresh_token', method: 'POST', success: function(response) { localStorage.setItem('token', response.token); localStorage.setItem('expiration', response.expiration); } }); }
在refresh_token
函數中,我們發送了一個 POST 請求到/refresh_token
接口來獲取新的 token 和有效期,并將其更新到本地存儲中。請注意,在實際開發中,refresh_token
接口應該由服務器實現,并且需要進行適當的身份驗證和授權。
通過以上方式,我們可以在發起所有 AJAX 請求之前自動檢查 token 是否過期,并且在需要時自動刷新 token。這樣,即使用戶在一段時間內沒有進行任何操作,他們的登錄狀態也可以得到保持,不需要頻繁重新登錄。這種設計能夠提升用戶體驗,同時也確保了系統的安全性。
綜上,AJAX統一攔截token過期刷新是一種有效的前端開發技術手段。通過檢測token的有效性,并在需要時刷新token,可以確保用戶在一段時間內持續使用系統而不需要頻繁地重新登錄。這種機制可以應用于各種系統,例如社交媒體、電子商務等。在實際開發中,我們可以根據具體業務需求和框架選擇合適的實現方式。