Как обрабатывать токен обновления при поступлении нескольких запросов?

Привет, я реализовал тот же сценарий в приложении response / redux. Но это поможет вам достичь цели. Вам не нужно проверять 401 при каждом вызове API. Просто реализуйте его в своем первом запросе API проверки. Вы можете использовать setTimeOut для отправки запроса API обновления токена до истечения срока действия токена аутентификации. Таким образом, locatStorage будет обновляться, и все запросы axios никогда не получат токены с истекшим сроком действия. Вот мое решение:

в моем Constants.js Я поддерживаю ТОКЕН ПОЛЬЗОВАТЕЛЯ в localStorage следующим образом:

 export const USER_TOKEN = {
   set: ({ token, refreshToken }) => {
      localStorage.setItem('access_token', token);
      localStorage.setItem('refresh_token', refreshToken);
   },
   remove: () => {
      localStorage.removeItem('access_token');
      localStorage.removeItem('refresh_token');
 },
   get: () => ({
     agent: 'agent',
     token: localStorage.getItem('access_token'),
     refreshToken: localStorage.getItem('refresh_token'),
  }),
   get notEmpty() {
      return this.get().token !== null;
  },
};

export const DEFAULT_HEADER = {
     get: () => ({
      'Content-type': 'application/json;charset=UTF-8',
       agent: `${USER_TOKEN.get().agent}`,
       access_token: `${USER_TOKEN.get().token}`,
 }),
};

при загрузке страницы запрос API проверки пользователем выглядит следующим образом:

dispatch(actions.validateUser(userPayload)) // First time authentication with user credentials and it return access token, refresh token and expiry time
  .then(userData => {
    const { expires_in, access_token, refresh_token } = userData
    USER_TOKEN.set({          // setting tokens in localStorage to accessible to all API calls
      token: access_token,
      refreshToken: refresh_token,
    });
    const timeout = expires_in * 1000 - 60 * 1000; // you can configure as you want but here it is 1 min before token will get expired
    this.expiryTimer = setTimeout(() => {  // this would reset localStorage before token expiry timr
      this.onRefreshToken();
    }, timeout);
  }).catch(error => {
    console.log("ERROR", error)
  });

onRefreshToken = () => {
   const { dispatch } = this.props;
   const refresh_token = USER_TOKEN.get().refreshToken;
   dispatch(actions.refreshToken({ refresh_token })).then(userData => {
      const { access_token, refresh_token } = userData
      USER_TOKEN.set({
         token: access_token,
          refreshToken: refresh_token,
    });
  });
};

Не стесняйтесь задавать любые вопросы. Другой способ - реализовать контроллер прерывания axios для отмены ожидающих обещаний. Рад помочь и с этим!

EDITED - вы можете поддерживать источник токена axios во всех ваших запросах API, чтобы прервать их в любое время. поддерживать источник токенов axios во всех своих API. как только первое обещание будет выполнено, вы можете отменить все остальные ожидающие запросы API. Вы можете вызвать метод onAbort после того, как будет выполнено ваше первое обещание. Видеть это:

//in your component
class MyComponent extends Component{
isTokenSource = axios.CancelToken.source(); // a signal you can point to any API

componentDidMount{
   // for example if you're sending multiple api call here
        this.props.dispatch(actions.myRequest(payload, this.isTokenSource.token))
        .then(() => {
            // all good
        })
        .catch(error => {
            if (axios.isCancel(error)) {
                console.warn('Error', error);
            }
        });
}

onAbortStuff = () => {  // cancel request interceptor
    console.log("Aborting Request");
    this.isTokenSource.cancel('API was cancelled'); // This will abort all the pending promises if you send the same token in multiple requests, 
}

render(){
//
}

В своем запросе axios вы можете отправить токен следующим образом:

export const myRequest= (id, cancelToken) => {
    const URL = `foo`;
    return axios(URL, {
      method: 'GET',
      headers: DEFAULT_HEADER.get(),
      cancelToken: cancelToken
    })
.then(response => {
  // handle success
  return response.data;
  })
.catch(error => {
  throw error;
   });
  };

Для справки вы можете прочитать эту статью, она очень полезна для понимания отмены подписок. https://medium.freecodecamp.org/how-to-work-with-react-the-right-way-to-avoid-some-common-pitfalls-fc9eb5e34d9e

Вы можете структурировать свои маршруты таким образом: index.js

<Provider store={store}>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</Provider>

App.js:

class App extends Component {


state = {
    isAuthenticated: false,
  };

  componentDidMount() {
   //authentication API and later you can setState isAuthenticate
   }
    render() {
    const { isAuthenticated } = this.state;
    return isAuthenticated ? <Routes /> : <Loading />;
  }

Если вы все еще обнаружите какую-либо проблему, я более чем счастлив помочь вам с этим.