詳細(xì)聊聊前端如何實(shí)現(xiàn)token無感刷新(refresh_token)
關(guān)于無感刷新的理解:
實(shí)現(xiàn)token無感刷新對于前端來說是一項(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è)簡陋的demo,給大家提供一個(gè)參考
下面是關(guān)于使用vuex來實(shí)現(xiàn)的寫法
步驟:
1.先搭好axios骨架,以及請求攔截器與響應(yīng)攔截器
2.再封裝好ajax的接口,一個(gè)獲取token的,一個(gè)需要token發(fā)送ajax的(獲取用戶信息等)
3.創(chuàng)建一個(gè)vuex的模塊并注冊,用于處理本次demo的數(shù)據(jù)存儲(chǔ),發(fā)送ajax等
4.創(chuàng)建好兩個(gè)頁面配置好路由,用于模擬登錄以及跳轉(zhuǎn)頁
5.測試, 可直接在localStorage里對存儲(chǔ)的token進(jìn)行修改并刷新頁面
登錄頁
登錄后發(fā)送ajax獲取token信息,并跳轉(zhuǎn)到首頁,獲取用戶信息
跳轉(zhuǎn)頁---首頁
報(bào)錯(cuò)
Vuex中代碼
axios工具函數(shù)(請求攔截器與響應(yīng)攔截器)
---請求攔截器
核心代碼 -- 響應(yīng)攔截器
到此為止,大概的步驟差不多完結(jié)了,下面是直接使用localStorage不使用vuex的寫法
登錄頁
跳轉(zhuǎn)頁
axios工具函數(shù)
--請求攔截器
--響應(yīng)攔截器
寫的比較簡陋,好些都沒寫,比如路由守衛(wèi)等,望見諒 ,大概的核心代碼就這些
總結(jié)
到此這篇關(guān)于前端如何實(shí)現(xiàn)token無感刷新(refresh_token)的文章就介紹到這了,更多相關(guān)前端token無感刷新(refresh_token)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題詳析
這篇文章主要給大家介紹了關(guān)于vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09iview中實(shí)現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式
這篇文章主要介紹了iview中實(shí)現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue常見報(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-07vue中實(shí)現(xiàn)圖片壓縮 file文件的方法
這篇文章主要介紹了vue中實(shí)現(xiàn)圖片壓縮 file文件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05