Vue + Axios handling error from server for all request

Question

I am using Vue + Axios + Vue Router + Vuex.

I want to handle authentication in Vue, after login, the user can do anything. But sometimes the token will be expired, and the server will give an error let's say Code = 123. What I want is, I want to redirect the user to login page if the server gives me Code = 123. I can check at every response of the axios, but it's not effective because there are hundreds of axios request that will affect .

Question:

How to redirect if the server gives some error code like Code = 123? This happen to hundreds of axios response.

Please note that:

It's server side checking, server can revoke token etc, so front end can't prevent token expiration.
I don't want to write checking manually for hundreds responses in axios. It will be great if I can handle it in one place, so if I make a refactor it will be easy to do.

chans chans · Accepted Answer · 2021-03-29T08:39:11

@thegrass, you can able to configure axios in global level and access the axios inside your application

The global config uses request , response interceptors

Any request fires from the application will go through this request interceptors and the response comes through response interceptors

If you have a logic in response interceptors saying if the response code is 123, then delete the access token stored in client side and redirect the user to login page

Please find the sample axios interceptors(you can also read more about axios global interceptors setup in vue js application)

In axios-config.js file

import axios from 'axios';

const http = axios.create();

/* Response Interceptors */
const interceptResErrors = (err) => {
  try {
    // check for response code 123 and redirect to login
    err = Object.assign(new Error(), {message: err.response.data});
  } catch (e) {
    // check for response code 123 and redirect to login
    // Will return err if something goes wrong
  }
  return Promise.reject(err);
};
const interceptResponse = (res) => {
  try {
    // check for response code 123 and redirect to login
    return Promise.resolve(res.data);
  } catch (e) {
    // check for response code 123 and redirect to login
    return Promise.resolve(res);
  }
};
http.interceptors.response.use(interceptResponse, interceptResErrors);

/* Request Interceptors */
const interceptReqErrors = err => Promise.reject(err);
const interceptRequest = (config) => {
  return config;
};
http.interceptors.request.use(interceptRequest, interceptReqErrors);

export default http;

This file export HTTP client axios object, you can import or mount this to Vue instance in main.js / app.js like mentioned below

import http from axios-config.js

Vue.prototype.$api = http;

Inside your component

this.$api.get('/some-api');

Vue + Axios handling error from server for all request

1 Answers