vue.js - 没有为asnycData请求执行Nuxtjs Axios onRequest()

Question

我已经配置了axios插件onRequest helper来对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帮助程序将在 actions中为 store调用。但是对于页面组件中的 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辅助函数传递。我在这里想念什么吗？如何解决这个问题？

Answer 1

当您使用import axios from 'axios'时，您没有使用最初指定的axios实例的配置。相反，您使用的是全新的axios实例。

正确的方法是利用$axios中的Nuxt context实例。

asyncData(context) {
   await context.$axios...
}