在 Nuxt (Vue) 中使用 Axios 内部服务

Question

我正在尝试在 Nuxt 项目中的服务中使用 nuxt 配置的 axios 实例，如下所示：

import axios from 'axios';

export default {
  async create (user) {
     axios.post('/api/user', { user })
  }
}

我在文件夹中定义了拦截器plugins，将令牌添加到每个请求的标头：

export default ({ $axios, store }) => {
  $axios.onRequest((config) => {
    if (store.token) {
      config.headers.common.Authorization = store.token
    }
  })
}

当我在服务中使用 axios 时，我显示请求不包含授权标头。

如果我像这样在组件或 vuex 中调用 axios 方法this.$axios，则请求包含所需的标头。但这种方式在服务中不起作用，因为如果我this.$axios在服务中使用，我会得到undefined. 在 Nuxt 的服务中使用配置的 axios 或使其可注入到服务中的正确方法是什么？

Answer 1

问题是您直接导入 axios，axios但插件@nuxtjs/axios创建了一个新实例来使用 nuxt 特定的配置选项（仔细查看./node_modules/@nuxtjs/axios/lib/plugin.js显示const axios = Axios.create(axiosOptions)）。因此，您必须使用此实例来访问授权标头。

因此，您也必须将您的服务注册为nuxt 插件并注入您的功能。请看一个未经测试的示例，但它显示了我在一些自定义插件中使用的方法：

export default function ({ $axios }, inject) {
  
  const myService = {
    async create (user) {
      $axios.post('/api/user', { user })
    }
  }

  // Will be available in the components as this.$myService
  inject('myService', myService)

}