Vue?Token過期問題的2種解決方案小結(jié)

更新時間：2023年02月18日 10:57:51 作者：Ethereal霄

在使用token進行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下

對于token過期，我們有兩種方案：

方案一：當(dāng)我們操作某個需要token作為請求頭的接口時，返回的數(shù)據(jù)錯誤error.response.status === 401，說明我們的token已經(jīng)過期了。

我們希望當(dāng)響應(yīng)返回的數(shù)據(jù)是401身份過期時，讓當(dāng)前瀏覽頁面強行跳轉(zhuǎn)到登入頁面，讓用戶手動更新token。拿到最新的token值后再跳回之前瀏覽的頁面。增強用戶體驗。

實現(xiàn)原理：

再阻攔響應(yīng)器中配置：

// 阻攔響應(yīng)器
request.interceptors.response.use(function (response) {
  return response
}, async function (error) {
  if (error.response && error.response.status === 401) {
    // token續(xù)簽方式1:
    //清空當(dāng)前vuex保存的token（我們這的vuex和本地已經(jīng)建立了關(guān)系，相當(dāng)于也清空了本地token）
     store.commit('upUser', '')
     console.log(router.currentRoute.fullPath)// 當(dāng)前路由的完整路徑（#后面的）
      //這里我們采用?path=的方式保存當(dāng)前瀏覽頁面的完整路徑，
    // push()會產(chǎn)生歷史記錄 而replace不會有歷史記錄
     router.push({ path: `/login?path=${router.currentRoute.fullPath}` })
 
  }
  return Promise.reject(error)
})

再登入組件中給登入功能函數(shù)添加：

this.$router.replace({
path: this.$route.query.path || '/'
})

// 1.點擊登入
    async onSubmit () {
      try {
        const { data: res } = await loginAPI(this.user)
        //登錄成功
        // 不嚴(yán)謹(jǐn)?shù)姆祷厣洗螢g覽的頁面
        // this.$router.back()
        // 推薦方式：
        // 登錄后, 判斷有未遂地址（有未遂地址的情況是：token過期，在阻攔響應(yīng)器中實現(xiàn)對未遂地址的保存）, 登入成功后跳轉(zhuǎn)到未遂地址, 否則去/路徑（跳到首頁--這種情況是：用戶主動前往登入頁面的登入，沒有未遂地址，登入成功后直接前往首頁）
        // replace不會產(chǎn)生路由歷史記錄
        this.$router.replace({
          path: this.$route.query.path || '/'
        })
        // 存儲獲取過來的token
        this.$store.commit('upUser', res.data)
      } catch (err) {
        console.log(err)
        if (err.response.status === 400) {
          this.$toast.fail('手機號或驗證碼錯誤')
        } else {
          this.$toast.fail('登入失敗，請稍后再試') // 可能由于網(wǎng)絡(luò)問題導(dǎo)致的登入失敗
        }
      }
    },

方案二：實現(xiàn)用戶無感知的刷新token值,我們希望當(dāng)響應(yīng)返回的數(shù)據(jù)是401身份過期時，響應(yīng)阻攔器自動幫我們刷新token值，而不是讓用戶手動更新token。拿到最新的token值后再重新發(fā)起剛剛因token過期的請求。從而實現(xiàn)無感知

前提是有后臺的配合：

登入后后臺接口返回值要求：必須提供刷新token的令牌

并且后臺提供了刷新token的接口： (請求頭要求是refresh_token)

注意：1. 在請求響應(yīng)器中做判斷在非刷新token的時候，給請求頭配置token，而刷新token的時候，我們自己手動添加請求頭為refresh_token

2.refresh_token也有過期的時候，這時只能強行讓用戶自己重新登入了

// 刷新用戶token
export const updataTokenAPI = function () {
  return request({
    method: 'PUT',
    url: '/v1_0/authorizations',
    headers: {
      Authorization: `Bearer ${store.state.user.refresh_token}`
    }
  })
}

實現(xiàn)原理：

import request from '@/utils/request'
import store from '@/store'
 
// 請求響應(yīng)器
request.interceptors.request.use(function (config) {
  // config ：本次請求的配置對象
  // config 里面有一個屬性：headers
  const { user } = store.state
//請求頭未配置信息的時候才會配置
  if (user.token && config.headers.Authorizatio === undefined) {
    config.headers.Authorization = `Bearer ${user.token}`
  }
  // 這里必須將config返回出去，否則請求會停在這 里
  return config
}, function (error) {
  // 如果請求出錯（還沒發(fā)送出去，可能是代碼寫錯了的問題），就會進入這里
  return Promise.reject(error)
})
 
// 阻攔響應(yīng)器
request.interceptors.response.use(function (response) {
  return response
}, async function (error) {
  if (error.response && error.response.status === 401) {
    // token續(xù)簽方式2: refreshToken(用戶無感知)
    // 將過期的token值清空
    store.commit('updataToken', '')
    //請求刷新token接口
    const { data: res } = await updataTokenAPI()
    //保存新的token值
    store.commit('updataToken', res.data.token)
    // 再調(diào)用一次未完成的請求啊(用戶無感知)
    // error.config 就是上一次axios請求的配置對象
    // console.dir(error.config)
    // 把新的token賦予到下一次axios請求的請求頭中
    error.config.headers.Authorization = 'Bearer ' + res.data.token
    // return到await的地方，將未完成的請求再次發(fā)起，
    return axios(error.config)
  } else if (error.response.status === 500 && error.config.url === '/v1_0/authorizations') {
    // 因為500的情況有很多種，refresh_token失效也是其中一種情況，所有再加上error.config.url === '/v1_0/authorizations'條件，確保是refresh_token失效情況
    // 清空所有的token和refresh_toekn，并且強制跳轉(zhuǎn)登錄頁面
    store.commit('upUser', {})
    router.push({ path: '/login' })
    Toast.fail('身份已過期')
  }
  return Promise.reject(error)
})