我如何在 axios 攔截器中重定向？

Question

我在vue js（main.js）中為刷新令牌編寫了一個axios interceptor ，當我在我的項目中收到401錯誤狀態代碼時，它會嘗試使用我的refresh_token獲取新令牌，如果刷新令牌是，則再次使用新令牌發送請求也無效我想重定向到登錄頁面並中斷 axios 請求，但我的問題是當刷新令牌無效時，我將卡在刷新令牌循環 api 調用中，我將在控制台中收到多個錯誤(duplicate navigation)另一個問題是我無法在catch block中捕獲錯誤，並且總是進入then block並且響應undefined

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'})
            })
        }
    });

Answer 1

您可以嘗試添加一個標志。 例如，

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
            })
        }
    });