亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

您的位置:首頁技術文章
文章詳情頁

js項目中前端如何實現無感刷新token

瀏覽:3日期:2022-06-12 15:17:41
目錄環境問題現象原因切入點操作流程1、處理 axios 響應攔截2、封裝 refreshToken 邏輯總結

前一陣遇到了一個問題,線上平臺有時會出現用戶正在使用的時候,突然要用戶去進行登錄,這樣會造成很不好的用戶體驗,但是當時一直沒有好的思路因此擱置了下來;通過零散時間查詢資料以及思考,最終解決了這個問題,接下來跟大家分享一下!

環境請求采用的 Axios V1.3.2。平臺的采用的 JWT(JSON Web Tokens) 進行用戶登錄鑒權。(拓展:JWT 是一種認證機制,讓后臺知道該請求是來自于受信的客戶端;更詳細的可以自行查詢相關資料)問題現象

線上用戶在使用的時候,偶爾會出現突然跳轉到登錄頁面,需要重新登錄的現象。

原因突然跳轉到登錄頁面,是由于當前的 token 過期,導致請求失敗;在 axios 的響應攔截axiosInstance.interceptors.response.use中處理失敗請求返回的狀態碼 401,此時得知token失效,因此跳轉到登錄頁面,讓用戶重新進行登錄。平臺目前的邏輯是在 token 未過期內,用戶登錄平臺可直接進入首頁,無需進行登錄操作;因此就存在該現象:用戶打開平臺,由于此時 token 未過期,用戶直接進入到了首頁,進行其他操作。但是在用戶操作的過程中,token 突然失效了,此時就會出現突然跳轉到登錄頁面,嚴重影響用戶的體驗感!(注:目前線上項目中存在數據大屏,一些實時數據的顯示;因此存在用戶長時間停留在大屏頁面,不進行操作,查看實時數據的情況)切入點怎樣及時的、在用戶感知不到的情況下更新token?當 token 失效的情況下,出錯的請求可能不僅只有一個;當失效的 token 更新后,怎樣將多個失敗的請求,重新發送?操作流程

好了!經過了一番分析后,我們找到了問題的所在,并且確定了切入點;那么接下來讓我們實操,將問題解決掉。

前要:

1、我們僅從前端的角度去處理。2、后端提供了兩個重要的參數:accessToken(用于請求頭中,進行鑒權,存在有效期);refreshToken(刷新令牌,用于更新過期的 accessToken,相對于 accessToken 而言,它的有效期更長)。

1、處理 axios 響應攔截

注:在我實際的項目中,accessToken 過期后端返回的 statusCode 值為 401,需要在axiosInstance.interceptors.response.use 的 error回調中進行邏輯處理。

// 響應攔截axiosInstance.interceptors.response.use( (response) => { return response; }, (error) => { let { data, config } = error.response; return new Promise((resolve, reject) => { /** * 判斷當前請求失敗 * 是否由 toekn 失效導致的 */ if (data.statusCode === 401) { /** * refreshToken 為封裝的有關更新 token 的相關操作 */refreshToken(() => { resolve(axiosInstance(config));}); } else {reject(error.response); } }) })我們通過判斷statusCode來確定,是否當前請求失敗是由token過期導致的;使用 Promise 處理將失敗的請求,將由于 token 過期導致的失敗請求存儲起來(存儲的是請求回調函數,resolve 狀態)。理由:后續我們更新了 token 后,可以將存儲的失敗請求重新發起,以此來達到用戶無感的體驗2、封裝 refreshToken 邏輯

要點:

存儲由于token過期導致的失敗的請求。更新本地以及axios中頭部的token。當 refreshToken 刷新令牌也過期后,讓用戶重新登錄。// 存儲由于 token 過期導致 失敗的請求let expiredRequestArr: any[] = [];/** * 存儲當前因為 token 失效導致發送失敗的請求 */const saveErrorRequest = (expiredRequest: () => any) => { expiredRequestArr.push(expiredRequest);}// 避免頻繁發送更新 let firstRequre = true;/** * 利用 refreshToken 更新當前使用的 token */const updateTokenByRefreshToken = () => { firstRequre = false; axiosInstance.post( '更新 token 的請求', ).then(res => { let { refreshToken, accessToken } = res.data; // 更新本地的token localStorage.setItem('accessToken', accessToken); // 更新請求頭中的 token setAxiosHeader(accessToken); localStorage.setItem('refreshToken', refreshToken); /** * 當獲取了最新的 refreshToken, accessToken 后 * 重新發起之前失敗的請求 */ expiredRequestArr.forEach(request => { request(); }) expiredRequestArr = []; }).catch(err => { console.log('刷新 token 失敗err', err); /** * 此時 refreshToken 也已經失效了 * 返回登錄頁,讓用戶重新進行登錄操作 */ window.location.href = `${HOME_PAGE}/login`; })}/** * 更新當前已過期的 token * @param expiredRequest 回調函數,返回由token過期導致失敗的請求 */export const refreshToken = (expiredRequest: () => any) => { saveErrorRequest(expiredRequest); if (firstRequre) { updateTokenByRefreshToken(); }}總結

經過一波分析以及操作,我們最終實現了實際項目中的無感刷新token,最主要的是有效避免了:用戶在平臺操作過程中突然要退出登錄的現象(尤其是當用戶進行信息填寫,突然要重新登錄,之前填寫的信息全部作廢,是很容易讓人發狂的)。

到此這篇關于js項目中前端如何實現無感刷新token的文章就介紹到這了,更多相關js 無感刷新token內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: JavaScript
主站蜘蛛池模板: 亚洲七七久久精品中文国产 | 中文字幕综合久久久久 | 久久精品成人 | 日韩亚洲精品不卡在线 | 亚洲看黄 | 国产精品视频播放 | 特别福利视频在线观看 | 久久综合九色综合精品 | 毛片大全在线 | 国产亚洲欧美另类专区 | 久久国产免费观看精品3 | 久久国产精品久久 | 麻豆国产高清精品国在线 | 欧美成人免费mv在线播放 | 婷婷开心六月久久综合丁香 | 大美女香蕉丽人视频网站 | 精品国产福利第一区二区三区 | 免费看大黄高清网站视频在线 | 免费在线观看a级片 | 国产亚洲精品日韩综合网 | 亚洲国产福利 | 久久在线一区 | 国产精品老女人精品视 | 亚洲国产亚洲片在线观看播放 | 国产一国产一有一级毛片 | xvideos国产 | 国产精品永久免费 | 一区二区视频在线观看 | 欧美成人免费一区在线播放 | 一级视频网站 | 美女拍拍拍无遮挡 | www.香蕉视频.com| 国产美女自拍视频 | 国产小视频国产精品 | 日韩免费一级片 | 午夜久久久精品 | 毛片黄| 精品国产日韩亚洲一区91 | 日本a及毛片免费视频 | 国产精品久久久久亚洲 | 在线视频麻豆 |