如何在axios插件中使用Nuxt $auth(如何将令牌添加到所有axios请求中)

isr3a4wc 于 2023-02-19 发布在 iOS

关注(0)|答案(2)|浏览(204)

我希望在我的Nuxt项目中使用$auth，特别是在一个axios插件中。
下面是我的代码：

- 插件/api. js**

export default function ({ $axios }, inject) {
  const api = $axios.create({
    headers: {
      common: {
        Accept: 'text/plain, */*',
      },
    },
  })

  // Set baseURL to something different
  api.setBaseURL('http://localhost:4100/')

  // Inject to context as $api
  inject('api', api)
}

现在，当我尝试使用@nuxtjs/auth-next包中的$auth时，问题出现了。
如文件所述：
这个模块全局注入$auth示例，意味着你可以使用这个. $auth在任何地方访问它。对于插件、asyncData、fetch、nuxtServerInit和中间件，你可以从上下文. $auth访问它。
我尝试了以下方法：
1.这将导致$auth未定义
导出默认函数（{$axios，$auth}，注入）{
1.这个就在附近
导出默认函数（{$axios，app}，inject）{console. log（app）//此函数将$auth记录在记录的对象console. log（app. $auth）中//我不明白为什么此函数返回undefined
我在这里的主要目标是利用this.$auth.strategy.token.get()并将其传递给（当然，如果令牌存在的话）使用这个. $api发出的每个请求的头
我一直在寻找类似的问题和答案，但没有一个能帮助我解决这个问题，我可以只在每次写这个. $api时添加令牌，但这会增加不必要的代码。
提前感谢所有人的时间和帮助。

- 编辑：**

好了，现在我做了一个测试。下一个代码实际上是正确地记录$auth对象，似乎需要一些时间才能使其工作，但现在我担心使用setTimeout可能会导致错误，因为我不能确切地知道$auth可用需要多少时间。

export default function ({ $axios, app }, inject) {
  setTimeout(() => {
    console.log('After timeout', app.$auth)
  }, 50)

- 编辑2：**

所以现在我做了更多的测试，使用0毫秒代替50毫秒也可以，所以我现在将使用0毫秒的setTimeout，我希望任何人在使用setTimeout之前找到更好的解决方案或解释为什么$auth不可用，以便我可以决定如何处理我的代码。

- 编辑3：**

在尝试将我之前的所有代码都 Package 在setTimeout中之后，我注意到代码失败了，所以这不是一个解决方案。

axios

来源：https://stackoverflow.com/questions/68308060/how-to-use-nuxt-auth-inside-an-axios-plugin-how-to-add-token-to-all-axios-requ

2条答案

按热度按时间

2izufjch1#

我已经找到了一个解决方案，所以我会把它贴出来，这样每个人都可以在未来有同样的问题可以解决它。
事实证明，我可以很容易地解决它使用拦截器。

export default function ({ $axios, app }, inject) {
  // At this point app.$auth is undefined. (Unless you use setTimeout but that is not a solution)

  //Create axios instance
  const api = $axios.create({
    headers: {
      common: {
        Accept: 'application/json', //accept json
      },
    },
  })
  // Here is the magic, onRequest is an interceptor, so every request made will go trough this, and then we try to access app.$auth inside it, it is defined
  api.onRequest((config) => {
    // Here we check if user is logged in
    if (app.$auth.loggedIn) {
      // If the user is logged in we can now get the token, we get something like `Bearer yourTokenJ9F0JFODJ` but we only need the string without the word **Bearer**, So we split the string using the space as a separator and we access the second position of the array **[1]**

      const token = app.$auth.strategy.token.get().split(' ')[1]
      api.setToken(token, 'Bearer') // Here we specify the token and now it works!!
    }
  })

  // Set baseURL to something different
  api.setBaseURL('http://localhost:4100/')

  // Inject to context as $api
  inject('api', api)
}

赞(0）回复(0）举报 2023-02-19

u4dcyp6a2#

Nuxt Auth本身也为这个问题提供了一个解决方案：https://auth.nuxtjs.org/recipes/extend/

赞(0）回复(0）举报 2023-02-19