Implementing Axios interceptor is a common practice in Vue.js applications to central

Question

Implementing Axios interceptor is a common practice in Vue.js applications to central

Hello everyone, I'm facing a problem with the interceptor in VueJS. I can't seem to figure out where the issue lies and it's driving me crazy...

I've gone through various tutorials and read numerous posts on stackoverflow, but everything still seems unclear to me.

When I add a debugger, it works fine, but as soon as I switch to "axios.interceptors" it gives me an error saying axios is undefined, which is puzzling...

import axios from 'axios';

debugger;
axios.interceptors.response.use(function (response) {
    console.log(response);
    // Any status code that falls within the range of 2xx causes 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);
});

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

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

The above code is used 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 am trying to detect HTTP status code 401 to log out the user and delete the token from the browser.

If anyone has any insights or solutions, I would greatly appreciate your help. Thank you so much.

Best regards, Christophe

javascript vue.js axios interceptor es6-modules

Answer 1

Answer №1

In the guidelines for interceptors provided in the documentation, it is mentioned that after defining the interceptors example, you must include the interceptor within an instance:

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);
    // Execute specific actions with response data for status codes in the 2xx range
    return response;
}, function (error) {
    console.log(error);
    // Handle response errors for status codes outside the 2xx range
    return Promise.reject(error);
});
export default instance;

Answer 2

In the guidelines for interceptors provided in the documentation, it is mentioned that after defining the interceptors example, you must include the interceptor within an instance:

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);
    // Execute specific actions with response data for status codes in the 2xx range
    return response;
}, function (error) {
    console.log(error);
    // Handle response errors for status codes outside the 2xx range
    return Promise.reject(error);
});
export default instance;

Answer 3

Answer №2

If you're curious about how the problem was resolved, here is the code I used:

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)
}

Next step is to add this to main.js

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

Create api.js which acts as my client for all requests, ensuring they pass through it.

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 trust this will be of use to you :)

Answer 4

If you're curious about how the problem was resolved, here is the code I used:

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)
}

Next step is to add this to main.js

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

Create api.js which acts as my client for all requests, ensuring they pass through it.

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 trust this will be of use to you :)

Implementing Axios interceptor is a common practice in Vue.js applications to central

Answer №1

Answer №2

Similar questions

Effortlessly sending multiple values from text fields using jQuery

Please ensure that the menu is included within the HTML file

What is the best method for emptying the input of Vuetify's v-autocomplete using the #clear slot?

Reset input fields while retaining placeholder text

Utilize the power of AJAX for efficiently sorting search results retrieved from MySQL

Show/hide functionality for 3 input fields based on radio button selection

Using jQuery to dynamically retrieve a radio button

"Error: Unable to access the property '$emit' of an undefined value" - VueJS

The pug blend fails to produce the desired output

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

Excessive requests to location or history APIs in a brief period of time

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

The issue of conflicting clickability between Vue row and href

Show the contents of a JSON file using Vue

How to efficiently target and manipulate links using jQuery Mobile

Strategies for passing a JavaScript variable to a JSP function

Adjust the color of the active link on the page using Angular and CSS

Utilizing Parent Scope Variables in AngularJS Directives with Isolated Scopes

Computed Property Output Remains Static in Template Usage (Vue3 sans Composition API)

Displaying Data in Table Using Ajax Request