如何在.onRequest拦截器中使用axios helper setToken答案

【问题标题】：how to use axios helper setToken inside .onRequest interceptor如何在.onRequest拦截器中使用axios helper setToken
【发布时间】：2020-09-27 12:19:15
【问题描述】：

我同时使用nuxt-auth 和nuxt-axios 模块。我想拦截每个 axios 请求并检查我的 JWT 访问令牌是否几乎过期，如果是，我想更新它。我为 nuxt-auth 写了一个小扩展，如下所示。我的问题是，一旦我获得了新的令牌，$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)
    }
  }
}

【问题讨论】：

标签： vue.js axios nuxt.js jwt-auth

【解决方案1】：

您可以在plugins/axios.js 中添加如下拦截器

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

【讨论】：

我实际上希望 auth 在我的拦截器中可用（这就是为什么我为 nuxt-auth 而不是 axios 制作了一个插件。顺便问一下，有什么区别使用config.headers['Authorization'] = 'Bearer abc' 或$axios.setToken(newToken) ?
如果您看到setToken (axios.nuxtjs.org/helpers.html#settoken) 的文档，它在内部会执行与headers['Authorization'] = 'Bearer abc' 相同的操作当我尝试使用setToken 时，由于一些内部错误，我也没有成功nuxt/axios