Axios interceptor refresh token for multiple requests

Question

I'll throw the http request because I'm calling the refresh token when it returns 401. After the refresh token response, I need to throw the previous request

SAMPLE Logın -> — 1 hours later— —> call product —> 401 —> call refresh token —> call product

I try this link a link and look this link a link but doesn't work.

Catch the 401 error

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

Call my action

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

Can you be more specific about what the problem is other than "it doesn't work"? Is there an error? Is it just not dispatching the action? Is the action dispatched but not handled? What have you tried to do in debugging? — Drew Reese, Sep 11 '19 at 14:24
Is your originalRequest really the entire err.config object? Or did you mean to destructure it? — Drew Reese, Sep 11 '19 at 14:26
Refresh token is in worked. originalRequest really the entire err.config object. I also called the last http operation with originalRequest. But I can't hold the action (type, payload) required to trigger the returned data. — Burak SARI, Sep 11 '19 at 14:40
Yes, I see a comment on the line where the `type` would be. And what is the problem? It is unclear what "can't hold the action..." means. — Drew Reese, Sep 11 '19 at 15:21
It isn't clear from your snippets if `store` is in scope or if it's even defined, and we've no idea what your action/reducer pair looks like, and you still haven't presented *what* is not working. Is there an error? Stack trace? Certainly there has to be more information available to help debug. Is it possible to create a shareable codesandbox that reproduces your issue so other can see what you see? — Drew Reese, Sep 13 '19 at 14:40

score 30 · Accepted Answer · answered Oct 08 '19 at 08:32

using this link I was able to solve the problem without triggering the redux store.

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

Axios interceptor refresh token for multiple requests

1 Answers1

Linked