詳細(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ù)存儲,發(fā)送ajax等
4.創(chuàng)建好兩個(gè)頁面配置好路由,用于模擬登錄以及跳轉(zhuǎn)頁
5.測試, 可直接在localStorage里對存儲的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餓了么樹形控件添加增刪改功能的示例代碼，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2017-10-10
這篇文章主要介紹了vue腳手架及vue-router基本使用，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中的h函數(shù)使用及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue 實(shí)時(shí)監(jiān)聽窗口變化 windowresize的兩種方法
這篇文章主要介紹了Vue 實(shí)時(shí)監(jiān)聽窗口變化 windowresize的兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
在日常開發(fā)中,Vue 項(xiàng)目中的表單布局和樣式優(yōu)化是一個(gè)重要的環(huán)節(jié),通過合理的布局與美觀的樣式設(shè)計(jì),不僅可以提升用戶體驗(yàn),還能增加頁面的實(shí)用性和觀賞性,本文將總結(jié)幾個(gè)常見的表單和表格布局優(yōu)化的技巧,需要的朋友可以參考下2024-10-10
解決Vue.js Devtools未檢測到Vue實(shí)例的問題
在開發(fā)Vue.js應(yīng)用時(shí),Vue.js Devtools是一個(gè)不可或缺的調(diào)試工具,然而,有時(shí)我們可能會遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個(gè)問題,并提供相應(yīng)的解決步驟與代碼示例,需要的朋友可以參考下2024-01-01
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來具體介紹一下,感興趣的可以了解一下2023-09-09
Vue3中無法為el-tree-select設(shè)置反選問題解析
這篇文章主要介紹了Vue3中無法為el-tree-select設(shè)置反選問題分析,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04