axiosで前処理（interceptors)が動かない

Question

各コンポーネント毎に

   axios.get('http://localhost:3000/users/', {
        headers: { 
            "Content-Type": "application/json" ,
            "access-token": this.$store.getters.user.accesstoken,
          }, 
        })

と、いう形でheader情報を書くのが面倒であるので、axiosのinterceptorsを書いて、全てのコンポーネントでaxiosでapiをcallする場合はheader情報を含めるという処理を行いたいです。
イメージとしてはpluginとしてjsファイルを作成しmain.jsで読み込むというものなのですが、うまくいきません。

例えばpacks/src/pluginsというディレクトリにinterceptors.jsというファイルを作成し
以下のようにvuexに保存しているアクセストークンを取得し、常にaxiosのheader情報に含めるという前処理を記載しています。

//interceptors.js
import axios from 'axios';
import store from './store.js'; //store.jsにはvuexのgetters,mutationsなどを記載

const inceptor = axios.interceptors.request.use(config => {
    config.headers = {
        "Content-Type": "application/json" ,
        "access-token": store.getters.user.accesstoken,
    }
    return config
})
export default interceptor;

これをhome.js(main.js)で読み込んでいます

import Vue from 'vue'
import router from "../router/router.js"
import store from '../src/plugins/store.js'
import interceptor from '../src/plugins/interceptor.js'//ここで先程のjsを読み込む
import Home from '../layouts_views/home.vue'


document.addEventListener('DOMContentLoaded', () => {
    const home = new Vue({
      router,
      store,
      interceptor,//vueで使用
      render: h => h(Home)
    }).$mount()
    document.body.appendChild(home.$el)
})

しかしこれであるとどうしても上手くいかないというか、そもそもconsoleを見るとエラーを吐いてしまっている状態です。
このやり方に習わなくても良いのですがどうすればinterceptorsで全てのコンポーネント で共通してaxiosにヘッダー情報を含めることができるでしょうか？
調べても出てこずで質問しました。
よろしくお願いします。

Answer 1

const inceptor = axios.interceptors.request.use(config => {

記載のコードでは、axios.interceptors.request.use関数の返り値をinceptorという変数に代入していることになりますが、この関数の返り値はnumber型になっているため、このinceptorをexportしても、axiosのインスタンスとして利用することはできません。

この関数は、axiosインスタンスに対して、リクエスト前のコールバックを設定する関数かと思いますので、以下のように、axios.create()で生成したインスタンスに対して設定を行い、これをexportして外部で利用する形が良いかと思います。(命名等は適宜変えてください)

import axios from 'axios';

const instance = axios.create();
instance.interceptors.request.use(config => {
  // 省略
});

export default instance;

これは、

1. axiosを利用するモジュールから直接importするか、
2. main.jsでimportしてインスタンスプロパティに追加して使うとかになると思います。

// 1. in MyPage.vue
import axios from './axios.js';
axios.get('/user').then( ~~~

---

// 2. in main.js
import axios from './axios.js';
Vue.prototype.$axios = axios;

// 2. in MyPage.vue
new Vue({
  beforeCreate: () => {
    this.$axios.get('/user').then( ~~~
  },
});

Vueを普段書かないので 2 のサンプルコードが変かもしれませんが、もし参考になれば ????