Vue.js - Export an axios interceptor

Question

Good evening everyone, here I have a problem with my interceptor in VueJS. I don't understand where my problem comes from, and I'm pulling my hair out...

I've watched several tutorials, I've watched several topics on stackoverflow, but I don't understand what's going on at all.

When I put a debugger on, it's triggered, but when I switch to "axios.interceptors" it tells me that axios is undefined, it's incomprehensible...

import axios from 'axios';

debugger;
axios.interceptors.response.use(function (response) {
    console.log(response);
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
}, function (error) {
    console.log(error);
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
});

const token = localStorage.getItem('token');

export default axios.create({
    baseURL: process.env.VUE_APP_URL_API,
    headers: {
        Authorization: `Bearer ${token}`
    }
})

The code above is called in my VueX Store.

import Http from "../../api/http";

export default {
    state: {
        customers: {},
        customer: {},
    },
    getters: {
        customers: state => state.customers,
    },
    mutations: {
        SET_CUSTOMERS(state, customers) {
            state.customers = customers;
        }
    },
    actions: {
        loadCustomers({commit}) {
            Http.get('/customers').then(result => {
                commit('SET_CUSTOMERS', result.data.data );
            }).catch(error => {
                throw new Error(`API ${error}`);
            });
        }
    }
};

I want to trigger http code 401 to logout my user and destroy the token in the browser.

If anyone could help me, I would be delighted, thank you very much.

Regards, Christophe

user_2185093 · Answer

As shown in the interceptor docs, just below the example interceptors, if you use an instance, you have to add the interceptor to it:

import axios from 'axios';

const token = localStorage.getItem('token');

const instance = axios.create({
    baseURL: process.env.VUE_APP_URL_API,
    headers: {
        Authorization: `Bearer ${token}`
    }
})

instance.interceptors.response.use(function (response) {
    console.log(response);
    // Any status code within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
}, function (error) {
    console.log(error);
    // Any status codes outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
});

export default instance;

user_5453116 · Answer

For people which are wondering how the issue has been solved, there is my code :)

success.js

export default function (response) {
    return response
}

failure.js import router from 'vue-router'

export default function (error) {
    switch (error.response.status) {
        case 401:
            localStorage.removeItem('jwt.token')

            router.push({
                name: 'Login'
            })
            break
    }

    return Promise.reject(error)
}

adding this to main.js

const token = localStorage.getItem('jwt.token')
if (token) {
    axios.defaults.headers.common.Authorization = token
}

create api.js which is my client for all the request, so my request are always passing by this.

import axios from 'axios'
import success from '@/interceptors/response/success'
import failure from '@/interceptors/response/failure'

const api = axios.create({
    baseURL: process.env.VUE_APP_URL_API
})

api.interceptors.request.use((config) => {
    const token = localStorage.getItem('jwt.token')

    config.headers.Authorization = `Bearer ${token}`

    return config
})

api.interceptors.response.use(success, failure)

export default api

I hope it will be usefull :)

Vue.js - Export an axios interceptor

2 Answers