Question

在ReactJS中，有没有办法不断检查以查看保存在localstorage中的令牌是否已过期？如果已过期，则要删除令牌。

遇到以下情况，但是只有在重新加载页面时才会触发它？：

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

Answer 1

以下假设您正在使用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我认为这是一个公平的假设

Answer 2

由于您无法使用在用户计算机上运行的代码来获取安全相关的用例，为什么不在使用它时才检查令牌？

在某些时候，您很可能从本地存储加载令牌并将其用于例如验证会话。为什么不在使用之前先检查其有效性？

这样可以省去进行持续活动以检查令牌，捆绑相关功能以及最有可能降低代码复杂性的麻烦。

毕竟，令牌不会因为存储在浏览器的存储空间而不会被使用而造成任何伤害，是吗？

ReactJS：如何不断检查localstorage中的令牌是否已过期？

2 个答案: