authentication - 如何使用 Nuxt 身份验证模块设置 $axios token ？

Question

直到最近，我才在我的 Nuxt 项目中使用我自己的注册/登录实现，在成功注册/登录后，我能够执行 this.$axios.setToken(token, 'Bearer') 和它会在 axios reguests 上全局设置授权 header 。现在我不得不重构应用程序并使用 Nuxt 身份验证模块。但是现在好像不能设置这个header了。

这是我的授权配置:

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

它没有帮助。因此，在注册/登录方法中，我尝试自己在 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}`)
    ...

同样没有效果。虽然在某些时候我似乎只能成功发送一个请求，并且我看到它确实在请求上有 Authorization header ，但是当我切换页面并尝试发送另一个请求时 - 它再次没有 header 和请求失败，出现错误 403。

所以我又尝试了一件事情 - 在我的默认布局中，在 beforeMount() Hook 中，我尝试检查用户是否已登录以及他是否已登录 - 设置标题:

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

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

我尝试设置授权 header 而不是 $axios.setToken():

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

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

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

Answer 1

好吧，一种方法是使用 nuxtServerInit

一旦您获取了 jwt token 并保存到 cookies/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')
        }
      },
    }