實現無感刷新 token 我是這樣做的

原文: https://juejin.cn/post/6983582201690456071

前言

最近在做需求的時候, 涉及到登錄 token, 產品提出一個問題: 能不能讓 token 過期時間長一點，我頻繁的要去登錄。

前端：後端，你能不能把 token 過期時間設置的長一點。

後端：可以, 但是那樣做不安全，你可以用更好的方法。

前端：什麼方法?

後端：給你刷新 token 的接口，定時去刷新 token

前端：好，讓我思考一下

需求

當 token 過期的時候，刷新 token, 前端需要做到無感刷新 token, 即刷 token 時要做到用戶無感知，避免頻繁登錄。實現思路

後端返回過期時間，前端判斷 token 過期時間, 去調用刷新 token 接口

缺點：需要後端額外提供一個 token 過期時間的字段；使用了本地時間判斷，若本地時間被篡改，特別是本地時間比服務器時間慢時，攔截會失敗。

寫個定時器，定時刷新 token 接口

缺點：浪費資源, 消耗性能, 不建議採用。

在響應攔截器中攔截，判斷 token 返回過期後，調用刷新 token 接口

實現

axios 的基本骨架, 利用 service.interceptors.response 進行攔截

import axios from 'axios'

service.interceptors.response.use(
  response => {
    if (response.data.code === 409) {
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        })
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

問題解決

問題一：如何防止多次刷新 token

我們通過一個變量 isRefreshing 去控制是否在刷新 token 的狀態。

import axios from 'axios'

service.interceptors.response.use(
  response => {
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

問題二：同時發起兩個或者兩個以上的請求時，其他接口怎麼解決

當第二個過期的請求進來，token 正在刷新，我們先將這個請求存到一個數組隊列中，想辦法讓這個請求處於等待中，一直等到刷新 token 後再逐個重試清空請求隊列。那麼如何做到讓這個請求處於等待中呢？爲了解決這個問題，我們得藉助 Promise。將請求存進隊列中後，同時返回一個 Promise，讓這個 Promise 一直處於 Pending 狀態（即不調用 resolve），此時這個請求就會一直等啊等，只要我們不執行 resolve，這個請求就會一直在等待。當刷新請求的接口返回來後，我們再調用 resolve，逐個重試。最終代碼：

import axios from 'axios'

// 是否正在刷新的標記
let isRefreshing = false
//重試隊列
let requests = []
service.interceptors.response.use(
  response => {
  //約定code 409 token 過期
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        //調用刷新token的接口
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          // 替換token
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
        //跳到登錄頁
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      } else {
        // 返回未執行 resolve 的 Promise
        return new Promise(resolve => {
          // 用函數形式將 resolve 存入，等待刷新後再執行
          requests.push(token => {
            response.headers.Authorization = `${token}`
            resolve(service(response.config))
          })
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

最後

產品的需求就完成啦，不知道還有沒有更好的解決方案，可以評論區留言，說出你的做法。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/IHaQEj7etTq3G2i-rclYjw

猜你喜歡