reactjs - 如何使用 NodeJS 在 React 应用程序中自动刷新 JWT 令牌？

问题描述

最近几天我尝试编写一些中间件来检查存储在redux-store中的令牌是否仍然有效并且没有达到它的到期日期。如果它不再有效，它应该在执行任何其他异步调用之前刷新令牌。我现在遇到的问题是组件中的异步 redux 函数在调用中间件之前首先被调用。

目前我写了以下中间件：

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

调用顺序：

传奇：

Executing call 现在代表组件中被调用的函数
start refresh 代表被调用的中间件

目前我遇到以下问题：

当组件中的异步函数 didComponentMount 被调用时，它将在中间件函数被调用之前被调用。这导致它将使用存储在 redux/local 存储中的旧令牌。

直到今天我真的找不到这个问题，并希望为这个问题获得一些外部帮助。

我知道这是重复的：如何使用 Redux 刷新 JWT 令牌？

谢谢您的帮助。如果您需要其他上下文/代码，请随时发表评论。我会将它添加到代码沙箱中。

最好的凯文。

标签： reactjsreduxreact-reduxmiddleware

reactjs - 如何使用 NodeJS 在 React 应用程序中自动刷新 JWT 令牌？

问题描述

解决方案

推荐阅读