Покажу немного практик, как интерцепторы упрощают жизнь мне, да и многим, в целом.
Здесь и далее покажу именно использование интерцепторов при работе с авторизацией по 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, а экземляр роутера, чтобы редиректить юзера. Надеюсь, помог и хоть как то наглядно показал способы применения :)
