如何使用Nuxt auth模块设置$axios令牌？

Question

直到最近，我在我的Nuxt项目中使用了我自己的注册/登录实现，在成功注册/登录之后，我能够做到这一点$axios。setToken（token，'Bearer'），它将在axios reguests上全局设置授权头。现在我必须重构应用程序并使用Nuxt auth模块。但现在我似乎无法设置此标题。

这是我的身份验证配置：

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/local', method: 'post', propertyName: 'jwt' },
          logout: false,
          user: { url: '/users/me', method: 'get', propertyName: false }
        },
      }
    },
    redirect: {
      login: '/login',
      home: '/home',
      user: '/users/me'
    },
}

我以为auth应该自动添加这个授权，因为它默认将globalToken设置为true，但它没有。所以我试图明确地指定它：

tokenRequired: true,
tokenType: 'bearer',
globalToken: true,
autoFetchUser: true

这没用。因此，在register/login方法中，我尝试自己在axios和$auth模块上设置令牌：

await this.$auth.loginWith('local', {
    data
  }).then(({data}) => {
    this.$apolloHelpers.onLogin(data.jwt)
    this.$axios.setToken(data.jwt, 'Bearer')
    this.$auth.setToken('local', `Bearer ${data.jwt}`)
    ...

也没有效果。虽然在某些时候，我似乎只能成功地发送一个请求，并且我看到它在请求上有授权标头，但是当我切换页面并尝试发送另一个请求时，它同样没有标头，请求失败，出现错误403。

所以我又尝试了一件事——在我的默认布局中，在beforeMount（）hook中，我尝试检查用户是否登录，以及他是否登录——设置标题：

if (this.$auth.loggedIn) {
  this.$axios.setToken(this.$auth.getToken('local'))
}

再次成功发送了一个请求，但当切换到另一个页面并尝试发送另一个请求时-403。

而不是$axios。setToken（）我试图设置授权标头：

this.$axios.defaults.headers.common.Authorization = `${this.$auth.getToken('local')}`

再一次-一个请求成功，另一个-403

为什么会这样？在注册/登录后，或者如果用户刷新页面并且已经登录，如何将授权标头设置为在所有请求上都存在？

Answer 1

以下是一个解决方案：

>

创建一个新插件，如/plugins/axios。js

在nuxt config中注册此插件：

plugins: [
        '~/plugins/axios.js'
]

编写令牌检查和更新方法

我假设令牌刷新是驻留在存储中的异步方法。

    export default function ({ $axios, store}) {
        $axios.onRequest(async (config) => {
            try {
                /// Store action to get or retrieve a token if it has expired
                const token = await store.dispatch('auth/getIdToken')
                 this.$axios.setToken(token, 'Bearer')
            } catch (error) {
                console.log("Could not update token:", error)
            }
            return config
        })
    
    }

关键部分是返回config，以便Axios可以继续请求。

学分归jonasjancarik：https://github.com/nuxt-community/axios-module/issues/482

Answer 2

一种方法是使用nuxtServerInit

获取jwt令牌并保存到Cookie/localstorage后，随后可以使用$axios。setToken。全球访问。下面是示例代码，让您有一个想法。

actions: {
      nuxtServerInit({ dispatch, commit, app }, context) {
        const cookies = cparse.parse(context.req.headers.cookie || '')
        if (cookies.hasOwnProperty('x-access-token')) {
          app.$axios.setToken(cookies['x-access-token'], 'Bearer')
        }
      },
    }