Как автоматически обновить токен JWT в приложении React с NodeJS?

Question

В последние несколько дней я пытался написать какое-то промежуточное программное обеспечение , которое проверяет, находится ли токен, хранящийся в redux-store , по-прежнему в силе и не достиг даты окончания срока действия. Если он больше недействителен, он должен обновить токен перед выполнением любого другого асинхронного вызова. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что асинхронные функции редукса в компонентах вызываются в первую очередь перед вызовом промежуточного программного обеспечения.

В настоящее время я написал следующее промежуточное ПО:

reduxMiddleware.js

const refreshJwt = ({ dispatch, getState }) => {
  return (next) => (action) => {
    console.log(typeof action);
    if (typeof action === "function") {
      if (getState().authentication.token) {
        // decode jwt so that we know if and when it expires

        var tokenExpiration = parseJwt(getState().authentication.token).exp;

        if (
          tokenExpiration &&
          moment(tokenExpiration) <
            moment(Math.floor(Date.now().valueOf() / 1000))._i
        ) {
          console.log("start refreshing");
          startRefreshToken(getState().authentication.refreshToken).then(
            (token) => {
              console.log("done refreshing");
              dispatch(updateAccessToken(token));
              next(action);
            }
          );
        }
      }
    }
    return next(action);
  };
};

export default refreshJwt;

Я применяю это промежуточное ПО примерно так:

export default () => {
  const store = createStore(
    combineReducers({
      authentication: authenticationReducer,
      venue: venueReducer,
      tables: tableReducer
    }),
    composeEnhancers(applyMiddleware(refreshJwt, thunk))
  );

  return store;
};

Код startRefreshToken:

const startRefreshToken = (refresh_token) => {
  return httpPost(
    process.env.NODE_ENV
      ? `https://tabbs-api.herokuapp.com/api/v1/token`
      : `http://localhost:3000/api/v1/token`,
    {
      refresh_token
    }
  )
    .then((response) => {
      localStorage.setItem(
        "authentication",
        JSON.stringify({
          token: response.data.token,
          refreshToken: refresh_token
        })
      );
      return response.data.token;
    })
    .catch((error) => {
      return Promise.reject(error.response);
    });
};

Порядок звонков:

Легенда:

• Выполнение вызова теперь означает функцию, вызываемую в компоненте
• начать обновлять стенды для промежуточного программного обеспечения, которое называется

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

• Когда асинхронная функция в компонентах didComponentMount вызывается, она вызывается до вызова функции промежуточного программного обеспечения. Это приводит к тому, что он будет использовать старый токен, хранящийся в избыточном / локальном хранилище.

Я действительно не могу найти проблему до сегодняшнего дня и хотел бы получить внешнюю помощь по этой проблеме.

Я знаю, что это дубликат: Как использовать Redux для обновления токена JWT?

Спасибо за помощь. Если вам понадобится дополнительный контекст / код, пожалуйста, не стесняйтесь комментировать. Я добавлю его в коды и коробки.

Лучший Кевин.