vue.js - 如何在 .onRequest 拦截器中使用 axios helper setToken

Question

我同时使用 nuxt-auth和 nuxt-axios模块。我想拦截每个 axios 请求并检查我的 JWT 访问 token 是否快过期，如果是，我想更新它。我为 nuxt-auth 写了一个小扩展，如下所示。我的问题是，一旦我得到新的 token ，$auth.setToken(strategy,newToken) 和 $axios.setToken(newToken) 似乎没有预期的更新。那么我应该如何使用拦截器和助手？我不确定这是使用它们的正确位置/方式

var jwtDecode = require("jwt-decode")

export default function({$auth, $axios}) {
  const strategy = "local"

  $axios.onRequest( async(config) => {
    if ($auth.loggedIn) {
      let refreshToken = "some confidtion"

      if (refreshToken) {
        try {
          await refreshAccessURL()
        } catch (error) {
          return Promise.reject(error)
        }
      }
    }
    return config
  })

  async function refreshAccessURL() {
    const refresh = $auth.getRefreshToken(strategy)
    try {
      const { access } = await $axios.$post(refreshURL, { refresh })
      const newToken = "Bearer " + access
      $auth.setToken(strategy, newToken)
      $axios.setToken(newToken)

      return newToken

    } catch (e) {
      $auth.logout()
      throw new Error(e)
    }
  }
}

Answer 1

您可以在 plugins/axios.js

中添加如下拦截器

export default function({ $axios }) {
  $axios.onRequest((config) => {
     config.headers['Authorization'] = `Bearer abc`;
  });
}