I am trying to push users back to the login page if authentication fails. However in a Axios interceptor the router push doesn’t seem to work. Are there good any other ways that i can deal with a authentication fail?
import Vue from 'vue'
import axios from 'axios'
import store from '../store';
// request interceptor
axios.interceptors.request.use(
config => {
const token = store().getters['auth/accessToken'];
if (token) {
config.headers['Authorization'] = 'Bearer ' + token;
}
return config;
},
error => {
Promise.reject(error)
});
// response interceptor
axios.interceptors.response.use((response) => {
return response
},
function (error) {
if (error.response.status === 401 && !window.refreshing) {
window.refreshing = true;
return axios.post('http://posadmin/api/auth/refresh',
{
"refresh_token": store().getters['auth/refreshToken']
})
.then(res => {
console.log(res.status);
console.log(res.data);
if (res.status === 200) {
store().commit("auth/refreshToken", res.data);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + store().getters['auth/accessToken'];
return axios(error.config);
} else {
console.log('200 else');
store().dispatch("auth/setLogout");
this.$router.push('/login');
}
})
.catch((error) => {
console.log(window.refreshing);
console.log('catch '+error);
store().dispatch("auth/setLogout");
this.$router.push('/login');
});
}
// return Error object with Promise
return Promise.reject(error);
});
Vue.prototype.$axios = axios;