Javascript 如何在axios拦截器中重定向？

我在vue js（main.js）中为刷新令牌编写了一个

axios拦截器

，我希望当我在项目中获得

401

错误状态代码时，它会尝试使用我的刷新令牌获取新令牌，并使用新令牌再次发送请求 如果刷新令牌也无效，我想重定向到登录页面并中断axios请求 但我的问题是，当刷新令牌无效时，我将卡在刷新令牌api调用的循环中，并在控制台中得到多个错误

（重复导航）

另一个问题是我无法在

catch block

中捕获错误，它总是转到

然后阻塞

，响应是

未定义

axios.interceptors.response.use((response) => {
        return response
    },
    function (error) {
        const originalRequest = error.config;
        if (error.response.status === 401) {
            axios.post(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_REFRESH_TOKEN,
                {
                    "refresh_token": localStorage.getItem("refresh_token")
                })
                .then(res => {
                        localStorage.setItem("token", "Bearer " + res.data.result.access_token);
                        originalRequest.headers['Authorization'] = localStorage.getItem("token");
                        return axios(originalRequest);
                }).catch(error=>{
                    console.log(error);
                    router.push({'name':'login'})
            })
        }
    });

---

您可以尝试添加一个标志。比如说,

let isAlready401=false
axios.interceptors.response.use((response) => {
        return response
    },
    function (error) {
        const originalRequest = error.config;
        if (!isAlready401&&error.response.status === 401) {
            isAlready401 = true
            axios.post(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_REFRESH_TOKEN,
                {
                    "refresh_token": localStorage.getItem("refresh_token")
                })
                .then(res => {
                        localStorage.setItem("token", "Bearer " + res.data.result.access_token);
                        originalRequest.headers['Authorization'] = localStorage.getItem("token");
                        return axios(originalRequest);
                }).catch(error=>{
                    console.log(error);
                    router.push({'name':'login'})
                    isAlready401 = false
            })
        }
    });

---

您可以尝试添加一个标志。比如说,

let isAlready401=false
axios.interceptors.response.use((response) => {
        return response
    },
    function (error) {
        const originalRequest = error.config;
        if (!isAlready401&&error.response.status === 401) {
            isAlready401 = true
            axios.post(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_REFRESH_TOKEN,
                {
                    "refresh_token": localStorage.getItem("refresh_token")
                })
                .then(res => {
                        localStorage.setItem("token", "Bearer " + res.data.result.access_token);
                        originalRequest.headers['Authorization'] = localStorage.getItem("token");
                        return axios(originalRequest);
                }).catch(error=>{
                    console.log(error);
                    router.push({'name':'login'})
                    isAlready401 = false
            })
        }
    });

---

工作tnx，但你们能帮助我为什么得到401头状态代码在刷新令牌api它不去捕捉块，然后登录。现在它总是去然后阻塞。它现在转到catch block并且我的代码正常工作的原因是我没有响应的数据。es

axios（originalRequest）

应该转到

catch

block吗@sinak@sinak您可以在

axios（originalRequest）

之后添加

then

和

catch

，以查看结果。我想获得

刷新令牌api调用的结果，我在那之后编写了then和catch，但即使hedaer为401且响应未定义，它也会一直运行到then。我很困惑OK，所以你需要导入定义了拦截器的路由器？工作于tnx，但你能帮助我为什么在刷新令牌api中获得401头状态码吗？它不会转到catch块，然后登录。现在它总是去然后阻塞。它现在转到catch block并且我的代码正常工作的原因是我没有响应的数据。es
axios（originalRequest）
应该转到
catch
block吗@sinak@sinak您可以在
axios（originalRequest）
之后添加
then
和
catch
，以查看结果。我想获得
刷新令牌api调用的结果，我在那之后编写了then和catch，但即使hedaer为401且响应未定义，它也会一直运行到then。我很困惑OK，所以您需要导入定义了拦截器的路由器？