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:
Code = 123
? This happen to hundreds of axios response.Please note that:
@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');