使用Axios攔截器停止請求並檢查令牌到期

Question

我正在嘗試查看令牌是否已過期，如果已過期，請發送刷新請求，然后再繼續執行。

axios.interceptors.request.use(config => {
  let accessToken = getAccessToken()

  if (accessToken && user) {
    config.headers['authorization'] = `Bearer ${accessToken}`
    config.headers['cache-control'] = `no-cache`

    const { exp } = jwtDecode(accessToken)

    if (Date.now() > exp * 1000) {
      refreshAccessToken().then(() => { return config }) // wait for refresh
    } else {
      return config
    }
  }

}, function (error) {
  return Promise.reject(error)
})

這是一個帶有承諾的刷新令牌功能：

function refreshAccessToken() {
  return new Promise(async (resolve, reject) => {

    if (refreshing) return resolve('refresh in progress')

    refreshing = true
    let refreshToken = getRefreshToken()

    let response = await serverTokenRefresh(refreshToken)
    if (response.success) {
      setAccessToken(response.accessToken)
      response.email = user
      setLocalStorageUser(response)
      refreshing = false

      return resolve('refresh successful')
    } else {
      await logOut()
      refreshing = false

      return reject(Error('refresh fail: ' + response.message))
    }
  })
}

由於某些原因，Axios不想等到刷新功能完成並且不向服務器發送任何呼叫。

我究竟做錯了什么？

Answer 1

可能是在您的第一個回調函數中，它需要作為Promise返回或聲明為async ：

axios.interceptors.request.use(async config => {
  let accessToken = getAccessToken()

  if (accessToken && user) {
    config.headers['authorization'] = `Bearer ${accessToken}`
    config.headers['cache-control'] = `no-cache`

    const { exp } = jwtDecode(accessToken)

    if (Date.now() > exp * 1000) {
      await refreshAccessToken(); // wait for refresh
      return config;
    } else {
      return config
    }
  }

}, function (error) {
  return Promise.reject(error)
})