詳細聊聊前端如何實現token無感刷新(refresh_token)
關于無感刷新的理解:
實現token無感刷新對于前端來說是一項非常常用的技術,其本質是為了優(yōu)化用戶體驗,當token過期時不需要用戶跳回登錄頁重新登錄,而是當token失效時,進行攔截,發(fā)送刷新token的ajax,獲取最新的token進行覆蓋,讓用戶感受不到token已經過期,今天寫了一個簡陋的demo,給大家提供一個參考
下面是關于使用vuex來實現的寫法
步驟:
1.先搭好axios骨架,以及請求攔截器與響應攔截器
2.再封裝好ajax的接口,一個獲取token的,一個需要token發(fā)送ajax的(獲取用戶信息等)
3.創(chuàng)建一個vuex的模塊并注冊,用于處理本次demo的數據存儲,發(fā)送ajax等
4.創(chuàng)建好兩個頁面配置好路由,用于模擬登錄以及跳轉頁
5.測試, 可直接在localStorage里對存儲的token進行修改并刷新頁面
登錄頁
登錄后發(fā)送ajax獲取token信息,并跳轉到首頁,獲取用戶信息
跳轉頁---首頁
報錯
Vuex中代碼
axios工具函數(請求攔截器與響應攔截器)
---請求攔截器
核心代碼 -- 響應攔截器
到此為止,大概的步驟差不多完結了,下面是直接使用localStorage不使用vuex的寫法
登錄頁
跳轉頁
axios工具函數
--請求攔截器
--響應攔截器
寫的比較簡陋,好些都沒寫,比如路由守衛(wèi)等,望見諒 ,大概的核心代碼就這些
總結
到此這篇關于前端如何實現token無感刷新(refresh_token)的文章就介紹到這了,更多相關前端token無感刷新(refresh_token)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Vue2中引入使用ElementUI教程的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的可以參考下2024-03-03
這篇文章主要介紹了vue.js?diff算法原理詳細解析，diff算法可以看作是一種對比算法，對比的對象是新舊虛擬Dom。顧名思義，diff算法可以找到新舊虛擬Dom之間的差異，但diff算法中其實并不是只有對比虛擬Dom，還有根據對比后的結果更新真實Dom2022-06-06
vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題詳析
這篇文章主要給大家介紹了關于vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
這篇文章主要介紹了Vuex入門學習之Getter詳解,Vuex 允許我們在 store 中定義 getter(可以認為是 store 的計算屬性),就像計算屬性一樣,getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發(fā)生了改變才會被重新計算,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue和React的相同點不不同點，文中對比介紹的非常詳細，對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-05-05
iview中實現this.$Modal.confirm自定義彈出框換行加樣式
這篇文章主要介紹了iview中實現this.$Modal.confirm自定義彈出框換行加樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
最近做了一個比較老的vue項目,啟動居然各種報錯,下面這篇文章主要給大家介紹了關于Vue常見報錯以及解決方案的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07
vue提供了mixins、extends配置項，最近使用中發(fā)現很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue中實現圖片壓縮 file文件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05