O
O
olegcvasov2021-11-14 17:28:39
JavaScript
olegcvasov, 2021-11-14 17:28:39

The vue js interceptor fires after the request. What is the problem?

I want to catch 401 errors in order to update the authorization token. I use everywhere to request Axios. 401 error is caught, but the console is also displayed only after the method is called. Because of this, when I call me() , a 401 error is returned and only then the request is processed.

My main.js file

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import Axios from 'axios'
import {getCookie} from "./helpers/core/cookies"

/**
 * Это перехватчик, проверяет валидный ли токен.
 * Если возвращает сервер 401 код - делаем запрос на обновление токена
 * если токен не обновился, то отправляем пользователя заново авторизоваться
 */
Axios.interceptors.response.use(response => response, error => {
  if(error.response.status === 401) {
    console.log('Истек')
    // store.dispatch('Auth/updateToken');
  }
  return error;
});

Vue.prototype.$http = Axios;

/**
 * Предупреждение о разработке
 * @type {boolean}
 */
Vue.config.productionTip = false

/**
 * Берем токен из куки и записываем в header axios'a, чтобы все рапросы с токеном были
 */
const token = getCookie('token')
if (token) {
  Vue.prototype.$http.defaults.headers.common['Authorization'] =  'Bearer ' + token
}

// document.title = 'Region'


new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question