VUE Token的失效處理詳解

更新時間：2021年11月19日 15:34:08 作者：RxinY924

這篇文章主要為大家介紹了VUE Token的失效處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

目標(biāo)

處理token失效的場景

token作為用戶的關(guān)鍵令牌信息不是長久有效的，一般都會有一個失效時間(由后端來決定什么時長后失效)，如果超過失效時間，當(dāng)前token就不能再作為用戶標(biāo)識請求數(shù)據(jù)了，這時候我們需要做一些額外的失效處理

思路分析

在這里插入圖片描述

后端：收到用戶訪問某個接口時，檢查當(dāng)前token是否失效，如果token已經(jīng)失效，返給前端一個約定好的狀態(tài)碼 10002

前端：在響應(yīng)攔截器中，分析接口的返回值，如果狀態(tài)碼為10002，則進行token失效操作

代碼落地

在**src/utils/request.js** 中，處理響應(yīng)攔截器的error時，補充自定義的邏輯

由于頁面跳轉(zhuǎn)要用到路由，這里先引入

// 引入路由
import router from '@/router'

代碼

// 響應(yīng)攔截器中
//  1. 根據(jù)后端返回數(shù)據(jù)判斷本次操作是否成功,不成功主動報錯
//  2. 如果成功，只返回有效數(shù)據(jù)
service.interceptors.response.use(
  response => {
    // 后端和前端的約定：success=true表示請求成功
    if (response.data.success) {
      return response.data
    } else {
      // 如果success為false 業(yè)務(wù)出錯,直接觸發(fā)reject
      // 被catch分支捕獲
      return Promise.reject(new Error(response.data.message))
    }
  },
  async error => {
    console.log('請求出錯啦', 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)的方案，前端只需要拿到錯誤碼做業(yè)務(wù)處理即可，此方案也是常用且安全的最優(yōu)方案

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

django中使用vue.js的要點總結(jié)
在本篇文章里小編給各位整理了關(guān)于django中使用vue.js需要注意的地方以及相關(guān)知識點，需要的朋友們跟著學(xué)習(xí)參考下。
2019-07-07
詳解Vue中雙向綁定原理及簡單實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue中雙向綁定原理及簡單實現(xiàn)，文中的示例代碼講解詳細(xì)，對我們深入了解Vue有一定的幫助，需要的可以參考一下
2023-05-05
vue引入swiper插件的使用實例
本篇文章主要介紹了vue引入swiper插件的使用實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Nuxt項目支持eslint+pritter+typescript的實現(xiàn)
這篇文章主要介紹了Nuxt項目支持eslint+pritter+typescript的實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
Vue infinite update loop的問題解決
這篇文章主要介紹了Vue "...infinite update loop..."的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue實現(xiàn)登陸登出的實現(xiàn)示例
本篇文章主要介紹了vue實現(xiàn)登陸登出的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue項目中更改名字和圖標(biāo)的簡單實現(xiàn)步驟
今天在寫vue項目時碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項目中更改名字和圖標(biāo)的簡單實現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
Vue首頁界面加載優(yōu)化實現(xiàn)方法詳解
如果你也遇到在 vue 應(yīng)用中，首頁加載資源過多，導(dǎo)致加載緩慢的問題，下面的方法也許能幫到你，主要的處理思想是：讓首頁多余的資源能在需要它的時候再加載
2022-09-09
vue中watch監(jiān)聽對象中某個屬性的方法
watch 的用法有個特點，就是當(dāng)值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會執(zhí)行，如果我們需要在最初綁定值得時候也執(zhí)行函數(shù)，就需要用到 immediate 屬性，這篇文章主要介紹了vue中watch監(jiān)聽對象中某個屬性的方法,需要的朋友可以參考下
2023-04-04
Vue3搭建組件庫開發(fā)環(huán)境的示例詳解
這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境，給大家講解依次搭建組件庫、example、文檔、cli，本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧
2022-11-11