石頭自清潔掃拖機器人G10S評測：多年黑科技集大成之作 懶人終極福音
科技圈經常能看到一個詞叫“縫合怪”，用來形容那些把好多功能或者外觀結合在一起的產品，通常這樣的詞是貶義詞，但如果真的是產品縫合的好、縫合的實用的話，那它就成了中性詞，今
Token無感知刷新是一種常見的技術，就是在用戶無感知的情況下自動處理Token過期的問題，避免用戶因Token過期而被迫重新登錄。以下是實現Token無感知刷新的主要步驟和考慮因素：
將AccessToken和RefreshToken存儲在客戶端的本地緩存中，如localStorage或sessionStorage。
確保RefreshToken的安全性，避免在客戶端以明文形式暴露。
在接收到響應后，通過響應攔截器檢查響應狀態碼。
如果狀態碼為401（未授權），則表明AccessToken已過期，此時應使用RefreshToken嘗試獲取新的AccessToken。
如果狀態碼為200（成功）或其他有效狀態碼，則直接處理響應數據。
當檢測到AccessToken過期時，使用RefreshToken向認證服務器發送請求以獲取新的AccessToken和（可選的）新的RefreshToken。
將新獲取的AccessToken保存到本地緩存，并替換掉舊的AccessToken。
重新發送請求：
使用新的AccessToken重新發送之前因Token過期而失敗的請求。
這可能需要將失敗的請求暫存起來，并在獲取到新Token后依次重新發送。
前端實現Token無感知刷新的過程主要涉及到對HTTP請求的攔截、Token狀態的判斷、Token的刷新以及請求的重發等步驟。以下是一個詳細的實現流程：
前端將AccessToken和RefreshToken存儲在瀏覽器的本地緩存中，如localStorage或sessionStorage。由于localStorage具有持久性，更適合存儲RefreshToken；而sessionStorage在頁面會話結束時會被清除，適合存儲AccessToken（但考慮到需要跨會話保持登錄狀態，通常也會選擇localStorage）。
在發送請求之前，通過請求攔截器檢查localStorage中是否存儲了有效的AccessToken。
如果存在，則將AccessToken添加到請求的Authorization頭部。
設置響應攔截器：
在接收到響應后，通過響應攔截器檢查響應狀態碼。
如果狀態碼為401（未授權），則表明AccessToken已過期，此時需要嘗試使用RefreshToken刷新Token。
發起一個POST請求到認證服務器，將RefreshToken作為請求體或請求頭發送給后端。
后端驗證RefreshToken的有效性，并返回一個新的AccessToken（和可選的新的RefreshToken）。
前端接收到新的AccessToken后，將其保存到localStorage中，并替換掉舊的AccessToken。
重新發送請求：
使用新的AccessToken重新發送之前因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的函數
本文鏈接：http://www.tebozhan.com/showinfo-26-100468-0.htmlToken無感知刷新前端
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 既然有了HTTP，為什么還要HTTPS？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號