Axios обработка ошибок

Question

Пишу интерфейс. Имеется аутентификация по jwt через апи сервис используя axios. Я написал interceptors который перезапрашивает jwt если старый истек.

this.$http.interceptors.response.use(null, (error) => {
    if (error.config && error.response && error.response.status === 401) {
        return this.$store.dispatch('auth/refreshtoken').then((res) => {
            if(res.success) {
                error.config.headers.Authorization = 'Bearer ' + this.$store.getters['auth/token'];
                return this.$http.request(error.config);
            } else {
                this.$router.push('/login')
            }
        });
    }
    return Promise.reject(error);
})

Теперь у меня проблема отловить ошибки 401. Как предотвратить вывод ошибки в консоль F12? Failed to load resource: the server responded with a status of 401 (Unauthorized).

Я хочу, чтоб axios при ошибке 401, пытался сделать перезапрос, но без вывода ошибки в консоль.

Answer 1

Как предотвратить вывод ошибки в консоль F12?

Никак. Это сообщение выводит браузер. Но можно пойти другим путем - перед отправкой запроса проверять срок токена с помощью axiosInstance.interceptors.request.

Вот пример, предварительно нужно поставить дополнительный пакет npm install jwt-decode:

/**
 * Начало отправки запроса:
 * проверка просрочки токена, выдача нового перед отправкой запроса
 */
axiosInstance.interceptors.request.use(async function (config) {
    return new Promise(async resolve => {
        // все запросы на авторизацию пропускаем без доп. обработки
        if (noAuthRoute(config.url)) {
            resolve(config);
            return;
        }

        try {
            let user = window.app.$store.state.auth.user;
            let payload = jwt_decode(user.access_token);
            let expTime = payload.exp * 1000;
            let curTime = new Date().getTime();

            // Если осталось 3 секунды и менее, обновляем токен
            if (expTime - curTime <= 3000) {
                // console.log("await refreshToken ....");
                await window.app.$store.dispatch("auth/refreshToken");
            }

            /**
             * Авто-добавление заголовков авторизации
             */
            config.headers = {...config.headers, ...window.app.$store.getters["auth/authHeader"]};

            resolve(config);
        } catch (err) {
            console.log("axiosInstance.interceptors.request.use", err);
            resolve(config);
        }
    });
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

БЛОГ НА HUSL

Axios обработка ошибок

Ответы (1 шт):