VUE Token的失效處理詳解
目標(biāo)
處理token失效的場景
token作為用戶的關(guān)鍵令牌信息不是長久有效的，一般都會有一個(gè)失效時(shí)間(由后端來決定什么時(shí)長后失效)，如果超過失效時(shí)間，當(dāng)前token就不能再作為用戶標(biāo)識請求數(shù)據(jù)了，這時(shí)候我們需要做一些額外的失效處理
思路分析
后端：收到用戶訪問某個(gè)接口時(shí)，檢查當(dāng)前token是否失效，如果token已經(jīng)失效，返給前端一個(gè)約定好的狀態(tài)碼 10002
前端：在響應(yīng)攔截器中，分析接口的返回值，如果狀態(tài)碼為10002， 則進(jìn)行token失效操作
代碼落地
在**src/utils/request.js** 中，處理響應(yīng)攔截器的error時(shí)，補(bǔ)充自定義的邏輯
由于頁面跳轉(zhuǎn)要用到路由，這里先引入
// 引入路由 import router from '@/router'
代碼
// 響應(yīng)攔截器中
// 1. 根據(jù)后端返回?cái)?shù)據(jù)判斷本次操作是否成功,不成功主動報(bào)錯(cuò)
// 2. 如果成功，只返回有效數(shù)據(jù)
service.interceptors.response.use(
response => {
// 后端和前端的約定：success=true表示請求成功
if (response.data.success) {
return response.data
} else {
// 如果success為false 業(yè)務(wù)出錯(cuò),直接觸發(fā)reject
// 被catch分支捕獲
return Promise.reject(new Error(response.data.message))
}
},
async error => {
console.log('請求出錯(cuò)啦', error)
if (error.response.data.code === 10002) {
console.log('token失效')
await store.dispatch('user/logout')
// .vue -- this.$route.fullPath
// .js -- router.currentRoute.fullPath
router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
}
console.dir(error)
return Promise.reject(error)
}
)
以上方案為后端主導(dǎo)的方案，前端只需要拿到錯(cuò)誤碼做業(yè)務(wù)處理即可，此方案也是常用且安全的最優(yōu)方案
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
django中使用vue.js的要點(diǎn)總結(jié)
在本篇文章里小編給各位整理了關(guān)于django中使用vue.js需要注意的地方以及相關(guān)知識點(diǎn)，需要的朋友們跟著學(xué)習(xí)參考下。2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中雙向綁定原理及簡單實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，對我們深入了解Vue有一定的幫助，需要的可以參考一下2023-05-05
本篇文章主要介紹了vue引入swiper插件的使用實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Nuxt項(xiàng)目支持eslint+pritter+typescript的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt項(xiàng)目支持eslint+pritter+typescript的實(shí)現(xiàn),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vue "...infinite update loop..."的問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn)步驟
今天在寫vue項(xiàng)目時(shí)碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Vue首頁界面加載優(yōu)化實(shí)現(xiàn)方法詳解
如果你也遇到在 vue 應(yīng)用中，首頁加載資源過多，導(dǎo)致加載緩慢的問題，下面的方法也許能幫到你，主要的處理思想是：讓首頁多余的資源能在需要它的時(shí)候再加載2022-09-09
vue中watch監(jiān)聽對象中某個(gè)屬性的方法
watch 的用法有個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會執(zhí)行，如果我們需要在最初綁定值得時(shí)候也執(zhí)行函數(shù)，就需要用到 immediate 屬性，這篇文章主要介紹了vue中watch監(jiān)聽對象中某個(gè)屬性的方法,需要的朋友可以參考下2023-04-04
這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境，給大家講解依次搭建組件庫、example、文檔、cli，本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧2022-11-11