我已经配置了 axios 插件 onRequest
帮助程序来在 API 请求上设置 Authorization
header ,如下所示
1. export default function({ $axios, redirect, app, store }) {
2. $axios.onRequest(config => {
3. var requestURL = config.url;
4. console.log("Making request to " + requestURL);
5. const token = store.state.user.account.token;
6. if (token) {
7. config.headers.common["Authorization"] = `Bearer ${token}`;
8. console.log("Added authorization header");
9. }
10. });
此 onRequest
帮助器会在 store
中针对actions
进行调用。但是对于页面组件中的asyncData
,调用到达上面第2行,但从未进入onRequest
函数。
import axios from "axios";
asyncData({ params }) {
console.log("params: " + params);
return axios
.get(`http://localhost:8080/user/id/${params.id}`)
.then(res => {
return { userData: res.data };
})
.catch(e => {
error({ statusCode: 404, message: "User not found" });
});
}
据我了解,所有 Axios 请求都应通过 onRequest
辅助函数传递。我在这里错过了什么吗?如何解决这个问题?
最佳答案
当您从 'axios' 导入 axios
时,您没有使用最初指定的 axios 实例的配置。相反,您使用的是全新的 axios 实例。
正确的方法是利用 Nuxt 上下文
中的 $axios
实例。
asyncData(context) {
await context.$axios...
}
关于vue.js - Nuxtjs Axios onRequest() 未针对 asnycData 请求执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59807124/