如何使用 Nuxt 身份验证模块设置 $axios 令牌？答案

【问题标题】：How to set $axios token with Nuxt auth module?如何使用 Nuxt 身份验证模块设置 $axios 令牌？
【发布时间】：2020-09-02 04:27:33
【问题描述】：

直到最近，我在我的 Nuxt 项目中使用了自己的注册/登录实现，在成功注册/登录后，我能够执行 this.$axios.setToken(token, 'Bearer') 并且它将在 axios 请求上全局设置授权标头。现在我不得不重构应用程序并使用 Nuxt auth 模块。但是现在好像不能设置这个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 模块上自己设置令牌：

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。

我尝试设置授权标头而不是 $axios.setToken()：

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

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

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

【问题讨论】：

好吧，我解决了这个问题。正如我所说，在重构它以使用 Nuxt 的身份验证模块之前，我使用了自己的身份验证系统。显然，我之前的实现留下了一些代码，它干扰了新的。一旦完全删除 - 一切都按预期工作。
你找到方法了吗？请分享。

标签： authentication axios nuxt.js

【解决方案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')
        }
      },
    }

【讨论】：

【解决方案2】：

这里有一个解决方案：

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

在 nuxt 配置中注册这个插件：

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

编写你的令牌检查和更新方法

我假设令牌刷新是驻留在您的商店中的 async 方法。

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

关键部分是 return config 以便 Axios 可以继续请求。

感谢 jonasjancarik：https://github.com/nuxt-community/axios-module/issues/482

【讨论】：