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

Question

直到最近，我在我的Nuxt项目中使用了自己的注册/登录实现，成功注册/登录后，我能够执行this.$axios.setToken(token, 'Bearer')，它将在axios重新来宾上全局设置授权标头。现在我不得不重构应用程序并使用Nuxt身份验证模块。但现在看来我无法设置此标头。

这是我的身份验证配置：

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

我认为身份验证应该自动添加此授权，因为它默认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}`)
...

也没有效果。虽然在某些时候我似乎只能成功发送一个请求，并且我看到它确实在请求上有授权标头，但是当我切换页面并尝试发送另一个请求时 - 它再次没有标头并且请求失败并出现错误 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 令牌并保存到 cookie/localstorage，随后您就可以使用$axios.setToken.for 全局访问。 下面是示例代码，可以为您提供一个想法。

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

Answer 2

这是一个解决方案：

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

2. 在nuxt配置中注册此插件：

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

3. 编写令牌检查和更新方法

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

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 可以继续请求。

致谢归乔纳斯扬卡里克：https://github.com/nuxt-community/axios-module/issues/482