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