React axios拦截器以获取刷新令牌

Question

我有一个使用express api的react应用程序。我正在尝试在访问令牌过期时刷新令牌。我正在使用axios拦截器来实现这一成就。

let isRefreshing = false;
let failedQueue = [];

const processQueue = (error, accessToken = null) => {
  failedQueue.forEach((prom) => {
    if (error) {
      prom.reject(error);
    } else {
      prom.resolve(accessToken);
    }
  });

  failedQueue = [];
};

axiosInstance.interceptors.response.use(
  async (response) => {
    return response;
  },
  async (error) => {
   
    const { status, data } = error.response;
    const originalRequest = error.config;  
    if (error.response.status===401 && data.message === "Invalid refresh token") {
        console.log("unauthorized");
       store.dispatch(authActions.logout());
        return;
      }
      
      if(error.response.status === 401 && data.message === "You are not authorized to access this route,you don't have a valid refresh token to create new access token "){
        console.log("invalid refresh token");
        console.log(error.response)
        store.dispatch(authActions.logout());
        return error.response;
      }

      if (error.response.status === 401 && !originalRequest._retry) {
        if (isRefreshing) {
          console.log("isRefreshing");
          return new Promise((resolve, reject) => {
            console.log("isRefreshing2");
            failedQueue.push({ resolve, reject });
          })
            .then((accessToken) => {
              console.log("access")
              originalRequest.headers["Authorization"] =
                "Bearer:" + accessToken;
              console.log("access: " + accessToken);
              return axiosInstance(originalRequest);
            })
            .catch((err) => {
              console.log("err");
              return Promise.reject(err);
            });
        }
        console.log("no refreshing"); 
        originalRequest._retry = true;
        console.log(originalRequest._retry);
        isRefreshing = true;
        return new Promise((resolve, reject) => { 
          postMethod("auth/token",null,null).then((result) => {
            console.log("result:",result)

              setToken(result.data.access_token);
              
              axiosInstance.defaults.headers.common["Authorization"] =
                "Bearer:" + result.data.access_token;
              originalRequest.headers["Authorization"] =
                "Bearer:" + result.data.access_token;

              processQueue(null, result.data.access_token);
              resolve(axiosInstance(originalRequest));
            })
            .catch((err) => {

              console.log(err.response)
              processQueue(err, null);
              reject(err);
            })
            .then(() => {
              isRefreshing = false;
            });
          //TODO:Eğer refresh tokenın da süresi dolmuşsa burda history.push oluyor. ama diğer tarafı bozuyor
        });
      } 
      return Promise.reject(error);
  }
);

它卡在某个地方了。我使用console.log来调试它。从控制台；

发布http://localhost:5000/api/auth/token？null 401（未经授权）

之后什么都没发生。我该怎么办？谢谢你的帮助

Answer 1

const axiosInstance = axios.create({
     baseURL: baseURL,
     timeout: 5000,
     headers: {
                'Authorization': localStorage.getItem('access_token') ? "JWT " + localStorage.getItem('access_token') : null,
                'Content-Type': 'application/json',
                'accept': 'application/json'
     }
});

axiosInstance.interceptors.response.use(
    response => response,
    error => {
        const originalRequest = error.config;

        // Prevent infinite loops
        if (error.response.status === 401 && originalRequest.url === baseURL+'token/refresh/') {
            window.location.href = '/login/';
            return Promise.reject(error);
        }

        if (error.response.data.code === "token_not_valid" &&
            error.response.status === 401 && 
            error.response.statusText === "Unauthorized") 
            {
                const refreshToken = localStorage.getItem('refresh_token');

                if (refreshToken){
                    const tokenParts = JSON.parse(atob(refreshToken.split('.')[1]));

                    // exp date in token is expressed in seconds, while now() returns milliseconds:
                    const now = Math.ceil(Date.now() / 1000);
                    console.log(tokenParts.exp);

                    if (tokenParts.exp > now) {
                        return axiosInstance
                        .post('/token/refresh/', {refresh: refreshToken})
                        .then((response) => {
            
                            localStorage.setItem('access_token', response.data.access);
                            localStorage.setItem('refresh_token', response.data.refresh);
            
                            axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
                            originalRequest.headers['Authorization'] = "JWT " + response.data.access;
            
                            return axiosInstance(originalRequest);
                        })
                        .catch(err => {
                            console.log(err)
                        });
                    }else{
                        console.log("Refresh token is expired", tokenParts.exp, now);
                        window.location.href = '/login/';
                    }
                }else{
                    console.log("Refresh token not available.")
                    window.location.href = '/login/';
                }
        }
      
     
      // specific error handling done elsewhere
      return Promise.reject(error);
  }
);