token作為用戶的關(guān)鍵令牌信息不是長(zhǎng)久有效的，一般都會(huì)有一個(gè)失效時(shí)間(由后端來(lái)決定什么時(shí)長(zhǎng)后失效)，如果超過失效時(shí)間，當(dāng)前token就不能再作為用戶標(biāo)識(shí)請(qǐng)求數(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ǔ)充自定義的邏輯

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

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

代碼

// 響應(yīng)攔截器中
//  1. 根據(jù)后端返回?cái)?shù)據(jù)判斷本次操作是否成功,不成功主動(dòng)報(bào)錯(cuò)
//  2. 如果成功，只返回有效數(shù)據(jù)
service.interceptors.response.use(
  response => {
    // 后端和前端的約定：success=true表示請(qǐng)求成功
    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('請(qǐng)求出錯(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)方案