Vue.js and Axios - redirect on 401

Question

I'm running Vue.js and axios and are trying to make a generic API object like the following:

import router from './router'
import auth from './auth'
const axios = require('axios')

export const API = axios.create({
  baseURL: `https://my-api.com/`,
  headers: {
    Authorization: auth.getToken()
  }
})

API.interceptors.response.use(null, function (error) {
  if (error.response.status === 401) {
    console.log('Failed to login')
    router.push('/Login')
  }
  return Promise.reject(error)
})

I'm trying to have the users redirected to the Login screen in my single page app, whenever a 401 error code is received. But I'm not getting redirected, and no error occurs in my Developer Tools in Chrome. I do get the console.log with Failed to login.

I guess the status code is stored under `error.response.status`. Please try it. — Sebastian Richter, Aug 30 '18 at 12:02
Updated question with `error.response.status` and some `console.log`. — Alfred Balle, Aug 30 '18 at 12:11
Ok then maybe post your router.js code. The interceptor looks good to me. — Sebastian Richter, Aug 30 '18 at 12:16

score 45 · Answer 1 · edited Jan 07 '21 at 14:25

45

I have detected a similar situation. I haved fixed with this code:

import router from 'router'
import store from 'store'
...
...
axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  console.log(error.response.data)
  if (error.response.status === 401) {
    store.dispatch('logout')
    router.push('/login')
  }
  return Promise.reject(error)
})

edited Jan 07 '21 at 14:25

live2

3,771
2
37
46

answered Feb 18 '19 at 11:00

Rubén Pozo

1,035
1
12
23

3

This was useful for me, but the 401 code existed in `error.response.status` instead of `error.response.data.error.statusCode` – vaughanos Nov 10 '20 at 21:19

score 6 · Answer 2 · answered Dec 16 '18 at 19:16

6

You can do something like follow:

axios.post("quote", params)
  .catch(function(error) {
    if (error.response && error.response.status === 401) {
      window.location.href = "logon";
    } else {
      // Handle error however you want
    }
  });

Source: https://github.com/axios/axios/issues/396#issuecomment-395592900

answered Dec 16 '18 at 19:16

Eduardo Cuomo

17,828
6
117
94

3

you would end up with potentially thousands of of spots of duplicated code. not good – Jason G Nov 23 '22 at 15:06

score 3 · Answer 3 · answered Aug 24 '20 at 12:28

you Can use below code and add httpClient.js file to your project:

import axios from 'axios';
import {
  authHeader
}
from '../helper'

const baseUrl = 'http://localhost:8811/api/';//local-test
const Api_Path = `${baseUrl}/`;

const httpClient = axios.create({
  baseURL: Api_Path,
  headers: {
    //Authorization: 'Bearer {token}',
    //timeout: 1000, // indicates, 1000ms ie. 1 second
    "Content-Type": "application/json",

  }
})
const authInterceptor = (config) => {
  config.headers['Authorization'] = authHeader();
  return config;
}
const errorInterceptor = error => {


// check if it's a server error
  if (!error.response) {
    //notify.warn('Network/Server error');
    console.error('**Network/Server error');
    console.log(error.response);
    return Promise.reject(error);
  }

  // all the other error responses
  switch (error.response.status) {
    case 400:
      console.error(error.response.status, error.message);
      //notify.warn('Nothing to display', 'Data Not Found');
      break;

    case 401: // authentication error, logout the user
      //notify.warn('Please login again', 'Session Expired');
      console.error(error.response.status, error.message);
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      //router.push('/auth');
      break;

default:
  console.error(error.response.status, error.message);
  //notify.error('Server Error');



 }
  return Promise.reject(error);
}
httpClient.interceptors.request.use(authInterceptor);
httpClient.interceptors.response.use(responseInterceptor, errorInterceptor);

export default httpClient;

How is this essential different compared to [the other answer](https://stackoverflow.com/a/54745771/201303)? Both use the `interceptors.response` — Julian, Nov 19 '20 at 08:43

Vue.js and Axios - redirect on 401

3 Answers3