Module overwrites custom Axios configuration

[darki73]

I've encountered problem where this module will try to overwrite my Axios configuration.

I am using @nuxtjs/composition-api alongside with typed-vuex, so in order to be able to use Axios in my store/index.ts, i need to create custom accessor (axios/accessor.ts):

import { Plugin } from '@nuxt/types';
import { AxiosRequestConfig } from 'axios';
import { axiosOnRequestConfiguration, ContextWithAxios } from '~/plugins/third-party/axios';
import { initializeAxios } from '~/services/common/axios';

const accessor: Plugin = ({ $axios, $accessor } : ContextWithAxios) => {
    initializeAxios($axios);

    $axios.onRequest((config: AxiosRequestConfig) => {
        axiosOnRequestConfiguration($accessor, config);
    });

};

export default accessor;

And here is the axios/index.ts:

import { Context } from '@nuxt/types';
import { NuxtAxiosInstance } from '@nuxtjs/axios';
import { AxiosRequestConfig } from 'axios';
import { isDefinedAndNotNull, isUndefinedOrNull } from '~/utilities/helpers';
import { accessorType } from '@/source/store';

export interface ContextWithAxios extends Context {
    $axios: NuxtAxiosInstance;
}

export const axiosOnRequestConfiguration = ($accessor: typeof accessorType, config: AxiosRequestConfig) => {
    config.headers.common['Content-Type'] = 'application/json';
    config.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    config.headers.common['X-Requested-Time'] = new Date().getTime();
    let currentRequestUrl = config.url;
    if (currentRequestUrl !== undefined) {
        if (currentRequestUrl.startsWith('console/')) {
            if (isDefinedAndNotNull($accessor.console.token)) {
                config.headers.common.Authorization = `${$accessor.console.token_type} ${$accessor.console.token}`;
            }
        }
    }

    if (isUndefinedOrNull(config.headers.common.Authorization)) {
        if (isDefinedAndNotNull($accessor.account.token)) {
            config.headers.common.Authorization = `${$accessor.account.token_type} ${$accessor.account.token}`;
        }
    }
}

export default function ({
    $axios,
    $accessor
} : ContextWithAxios) {
    $axios.onRequest((config: AxiosRequestConfig) => {
        axiosOnRequestConfiguration($accessor, config);
    });
}

$accessor in this case is the typed-vuex accessor and the store/index.ts looks like this:

import { GetterTree, ActionTree, MutationTree } from 'vuex';
import { getAccessorType } from 'typed-vuex';

export const state = () => ({});
export type RootState = ReturnType<typeof state>;

export const getters: GetterTree<RootState, RootState> = {};

export const mutations: MutationTree<RootState> = {};

export const actions: ActionTree<RootState, RootState> = {};

import * as account from '~/store/account';
import * as application from '~/store/application';
import * as console from '~/store/console';

export const accessorType = getAccessorType({
    state,
    getters,
    mutations,
    actions,
    modules: {
        application,
        account,
        console,
    },
});

So whenever i refresh page, i am getting all sorts of errors as my Axios instance is now overwritten by this module.

[ricardogobbosouza]

Sorry, but this module doesn't even touch the axios