主页 / 问题 / 1336232
Accepted
Vyacheslav Odinokov
Asked:2022-10-08 17:24:37 +0800 CST2022-10-08 17:24:37 +0800 CST

Axios 错误处理

  • 772

我正在写一个界面。通过使用 axios 的 api 服务进行 jwt 身份验证。我写了拦截器，如果旧的已经过期，它会重新请求 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 错误，但不将错误输出到控制台。

vue.js

1 个回答

  1. Best Answer

    如何防止错误输出到 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);
});
    • 1

相关问题