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，則進(jìn)行token失效操作

代碼落地

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

由于頁面跳轉(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)方案