Как правильно использовать интерцепторы в axios?

Здравствуйте, хотел узнать у более опытных коллег как правильно использовать interceptors как при запросе так и при ответе. Можно ли управлять роутингом при запросах?

axios.interceptors.request.use(
  function(config) {
    if (!config.url.includes('Authenticate') && !config.headers.common['X-RANDOMIZE-TOKEN']) {
      const token = localStorage.getItem('token');
      if (token) {
        config.headers.common['X-RANDOMIZE-TOKEN'] = token;
        axios.defaults.headers.common['X-RANDOMIZE-TOKEN'] = token;
      } else {
        router.replace('/login');
        return config;
      }
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    return response;
  },
  function(error) {
    EventBus.$emit('error-notify', error);
    if (error.response.status === 401) {
      router.replace('/login');
    }
    return Promise.reject(error.response);
  }
);
  • Вопрос задан
  • 35699 просмотров
Пригласить эксперта
Ответы на вопрос 3
owl1n
@owl1n
fullstack developer
Покажу немного практик, как интерцепторы упрощают жизнь мне, да и многим, в целом.
Здесь и далее покажу именно использование интерцепторов при работе с авторизацией по JWT (токены).

1) Подстановка хедера авторизации

const createSetAuthInterceptor = options => config => {
  if (options.access) {
    config.headers.Authorization = options.access;
  } else {
    delete config.headers.Authorization;
  }
  return config;
};

const setAuthCb = createSetAuthInterceptor(store.state.auth);
axios.interceptors.request.use(setAuthCb);


Здесь мы проверям наличие доступа из стора, а точнее, наличие токена. Далее, подставляем, либо удаляем заголовок.

2) Следующая практика, это обновление токена (то, о чем вы спросили в комментарии, при окончании сессии и т.д.)

let refreshTokenPromise;

const createUpdateAuthInterceptor = (store, http) => async error => {
  const message = get(error, 'response.data.message');
  if (!['Token expired', 'Invalid token'].includes(message)) {
    return Promise.reject(error);
  }

  if (!refreshTokenPromise) {
    refreshTokenPromise = store.dispatch('refreshToken');
  }

  await refreshTokenPromise;
  refreshTokenPromise = null;

  return http(error.config);
};

const updateAuthCb = createUpdateAuthInterceptor(store, axios);
axios.interceptors.response.use(null, updateAuthCb);


Здесь мы можем видеть, что при каждом ответе проверяем наличие ошибок и если ошибка соответствует ошибке с токеном, то отправляем обновлять токен и далее снова отправляем тот же самый запрос, который к нам вернулся с ошибкой. Тут грамотно будет проверять не само сообщение об ошибке, а код ответа (401 и т.д.), но тут используется такое решение уже из за специфики бэка.

В этом же решение, вместо обновления токена, можно отправлять юзера авторизовываться самому, на страницу авторизации. Для этого, конечно же, стоит передавать не экземпляр store, а экземляр роутера, чтобы редиректить юзера. Надеюсь, помог и хоть как то наглядно показал способы применения :)
Ответ написан
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Можно - это одна из практик, т.е. когда вы делаете первый раз запрос к апи, например, чтобы получить текущего пользователя, и в случае, если получаете ошибку доступа, переходите на страницу авторизации.
Но также можно реализовать аналогичное поведение используя хуки вью роутера. Т.е. в хуке .beforeEach делаете запрос пользователя, если и тут же в исключении делаете переход на авторизацию:
store.dispatch('urrent_user')
        .then(r => {
            // next processing
        })
        .catch(e => {
             // goto login
        })
Ответ написан
@Artem0071
Безработный mr. Junior
Вообще интерцепторы для другого
Например на "событие начала загрузки" можно включать индикатор загрузки, а на "событие конца загрузки" его отключать

А что на счет связи роутинга и аякса, то во вью есть хуки. Вот в них и можно обрабатывать данные когда происходят переходы по страницам
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы