Question

直到最近，我在Nuxt项目中使用了自己的注册/登录实现，在此注册/登录成功之后，我能够执行this.$axios.setToken(token, 'Bearer')，它将在axios要求上全局设置授权标头。现在，我不得不重构应用程序并使用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}`)
    ...

也没有效果。尽管在某个时候似乎我只能成功发送一个请求，并且看到请求上确实有Authorization标头，但是当我切换页面并尝试发送另一个请求时-再次没有标头和该请求失败，错误403。

因此，我尝试了另一件事-在默认布局中的beforeMount（）挂钩中，我尝试检查用户是否已登录以及是否已登录-设置标头：

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

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

我尝试设置Authorization标头而不是$ axios.setToken（）：

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

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

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

Answer 1

嗯，一种方法可以使用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模块设置$ axios令牌？

1 个答案: