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

直到最近，我在我的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

---

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

好的，一种方法是使用

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')
        }
      },
    }

---

一种方法是使用

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')
        }
      },
    }

---

我解决了这个问题。正如我所说的，我使用了自己的身份验证系统，然后将其重构为使用Nuxt的auth模块。显然，我以前的实现留下了一些代码，它干扰了新的实现。一旦完全移除，所有的东西都能正常工作。你找到办法了吗？请分享。我解决了这个问题。正如我所说的，我使用了自己的身份验证系统，然后将其重构为使用Nuxt的auth模块。显然，我以前的实现留下了一些代码，它干扰了新的实现。一旦完全移除，所有的东西都能正常工作。你找到办法了吗？请分享。