多個請求的 axios 攔截器刷新令牌

Question

我將拋出http請求，因為我在返回401時調用了刷新令牌。刷新令牌響應后，我需要拋出之前的請求

SAMPLE Logın -> — 1 小時后 — —> 調用產品 —> 401 —> 調用刷新令牌 —> 調用產品

我嘗試這個鏈接一個鏈接並查看這個鏈接一個鏈接但不起作用。

捕捉 401 錯誤

setInterceptors = () => {
        axios.interceptors.response.use(
            response => {
                return response;
            },
            err => {
                return new Promise((resolve, reject) => {
                    if (err.response.status === 401 && err.config && !err.config.__isRetryRequest) {

                        const originalRequest = err.config;

                        this.emit('onAutoLogin', originalRequest);
                    }
                    // throw err;
                });
            }
        );
    };

呼喚我的行動

jwtService.on('onAutoLogin', originalRequest => {
                    jwtService
                        .signInWithToken()
                        .then(res => {
                            if (res.access_token) {
                                originalRequest.headers['Authorization'] = 'Bearer ' + res.access_token;


Axios.request(originalRequest).then(response => {
                                    store.dispatch({
                                        type: ** MY PROBLEM İS HERE **
                                        payload: response.data
                                    });
                                });
                            }
                        })
                        .catch(err => {
                            jwtService.setSession(null); 
});

Answer 1

使用此鏈接，我能夠在不觸發 redux 存儲的情況下解決問題。

let isRefreshing = false;
 let failedQueue = [];

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

            failedQueue = [];
        };

axios.interceptors.response.use(
            response => {
                return response;
            },
err => {
                const originalRequest = err.config;

                if (err.response.status === 401 && !originalRequest._retry) {
                    if (isRefreshing) {
                        return new Promise(function(resolve, reject) {
                            failedQueue.push({ resolve, reject });
                        })
                            .then(token => {
                                originalRequest.headers['Authorization'] = 'Bearer ' + token;
                                return axios(originalRequest);
                            })
                            .catch(err => {
                                return Promise.reject(err);
                            });
                    }

                    originalRequest._retry = true;
                    isRefreshing = true;

                    return new Promise(function(resolve, reject) {
                        axios
                            .post('/fooUrl/refreshToken', {
                                refreshToken: "fooToken"})
                            .then(({ data }) => {
                                axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.fooToken;
                                originalRequest.headers['Authorization'] = 'Bearer ' + data.fooToken;
                                processQueue(null, data.fooToken);
                                resolve(axios(originalRequest));
                            })
                            .catch(err => {
                                processQueue(err, null);
                                store.dispatch(showMessage({ message: 'Expired Token' }));

                                reject(err);
                            })
                            .then(() => {
                                isRefreshing = false;
                            });
                    });
                }

                return Promise.reject(err);
            }
        );

Answer 2

這是我實現它的一種快速方法。 我發現推理代碼更簡單一些。 我已經從這個解決方案中調整了它：這里

let refreshTokenPromise: null | Promise < any > ;

instance.interceptors.response.use(r => {
  const {
    data
  } = r;
  if (data.errors && data.errors[0].message === "AUTH_EXPIRED") {
    if (!refreshTokenPromise) {
      refreshTokenPromise = fetchRefreshToken().then(data => {
        refreshTokenPromise = null;
        return data;
      });
    }

    return refreshTokenPromise.then(token => {
      if (r.config.headers) r.config.headers["Authorization"] = token;
      return instance.request(r.config);
    });
  }
  return r;
});