javascript - 在 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 或使其可在服务中注入的正确方法是什么？

标签： javascriptvue.jsvuejs2nuxt.js

Answer 1

问题是您直接从导入 axiosaxios但插件创建了一个新实例以使用nuxt@nuxtjs/axios特定的配置选项（仔细查看 show ）。因此，您必须使用此实例来访问 Authorization 标头。./node_modules/@nuxtjs/axios/lib/plugin.jsconst 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)

}