javascript - ReactJS:如何不断检查本地存储中的 token 是否已过期？

在ReactJS中，是否有一种方法可以不断检查是否保存在本地存储中的令牌已过期？如果已过期，则要删除令牌。

遇到以下问题，但不是仅在重新加载页面时才会触发吗？：

window.onbeforeunload = function() {
    //remove token
    return '';
}

最佳答案

以下假设您使用的是redux...。您可以创建一个中间件，该中间件将在令牌到期时触发操作。这将允许您在下游处理reducer。 redux方法主要是因为Redux是当前最流行的与React一起使用的状态管理解决方案。

// export the action type used as a const, so it can be imported for
// the reducer to listen for...  The export const/key is more convenient
// then you can use a more namespaced string value to help prevent collisions
export const TOKEN_EXPIRED = 'tokenExpiredMiddleware_TokenExpired';

// redux middleware pattern (store) => (next) => (action) => result;
export default function expiredTokenMiddleware(store) {
  // here we only care about a handle to the store for store.dispatch
  // start checking every 15 seconds, probably want this configurable
  setInterval(checkToken.bind(null, store), 15000);

  // return a pass-through for the plugin, so other plugins work
  return (next) => (action) => next(action);
}

// export checkToken for testing... etc
// should probably be a separate module
export function checkToken(store) {
  var tokenId = ''; // TODO: Identify token
  var isExpired = true; // TODO: replace with function to get current state
  if (isExpired) {
    store.dispatch({
      type: TOKEN_EXPIRED,
      payload: { tokenId },
    });
  }
};

然后，当您创建createStore时，您只需添加将发出适当动作的中间件，然后就可以在适当的reducer中对其进行处理...我对窗口的大小调整/滚动事件做了类似的操作，以便我的大小/位置始终设置。

这是使用ES6 +语法的，因为您使用的是React我认为这是一个合理的假设