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

Question

直到最近，我在我的Nuxt项目中使用了我自己的registerlogin实现，在成功注册登录后，我能够做的是 this.$axios.setToken(token, 'Bearer') 并且它会在axios reguests上全局设置授权头。现在我不得不重构应用，使用Nuxt auth模块。但现在似乎我不能设置这个头。

这是我的 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

但没有用 所以在registerlogin方法中，我试着在axios和$auth模块中自己设置token。

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()钩子中，我尝试检查用户是否已登录，如果是--设置头。

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

好吧，一种方法是使用 nuxtServerInit

一旦您获取了jwt标记并保存到cookielocalstorage中，随后您可以使用 $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')
        }
      },
    }