Javascript ReactJS：如何持续检查localstorage中的令牌是否已过期？

在ReactJS中，是否有办法持续检查保存在localstorage中的令牌是否已过期？如果已过期，则希望删除该令牌

遇到以下问题，但它不是只有在重新加载页面时才会被触发吗

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

---

既然您不能将运行在用户机器上的代码用于与安全相关的用例，为什么不只在使用令牌时检查令牌呢

在某个时刻，您很可能从本地存储加载令牌，并使用它来验证会话。为什么不先检查一下它的有效性，然后再使用呢

这为您省去了检查令牌、捆绑包相关功能以及最有可能降低代码复杂性的持续活动的麻烦

---

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

既然您不能将用户机器上运行的代码用于与安全相关的用例，为什么不在使用令牌时才检查令牌呢

在某个时刻，您很可能从本地存储加载令牌，并使用它来验证会话。为什么不先检查一下它的有效性，然后再使用呢

这为您省去了检查令牌、捆绑包相关功能以及最有可能降低代码复杂性的持续活动的麻烦

---

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

以下假设您正在使用redux。。。您可以创建一个中间件，在令牌过期时触发操作。。这将允许您处理下游的减速器。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，我认为这是一个合理的假设

以下假设您使用的是redux。。。您可以创建一个中间件，在令牌过期时触发操作。。这将允许您处理下游的减速器。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，我认为这是一个合理的假设

什么对您来说总是意味着什么？为什么不使用setInterval？@Timo-like在应用程序运行时，保持checking@Cleiton对不起，你能详细说明一下这与ReactJS有什么关系吗？另外，您如何检查令牌是否过期？如果您知道它何时过期，您可以使用setTimeout一次。。。如果要针对服务器进行验证，则需要提供该详细信息。。。至于如何与react集成，您如何管理您的状态？您使用的是存储、内联状态吗？您希望发生什么？持续对您意味着什么？为什么不使用setInterval？@Timo like当应用程序运行时，保持checking@Cleiton对不起，你能详细说明一下这与ReactJS有什么关系吗？另外，您如何检查令牌是否过期？如果您知道它何时过期，您可以使用setTimeout一次。。。如果要针对服务器进行验证，则需要提供该详细信息。。。至于如何与react集成，您如何管理您的状态？您使用的是存储、内联状态吗？您希望发生什么？可能会这样做，因此除了@usedtobefatt指出的反应式解决方案之外，您还可以主动通知用户非常感谢您的洞察力。有几个问题需要澄清。首先，所有的创造者都应该付诸行动吗？您能详细说明一下什么是中间件模式和插件的传递方式吗？checkToken只是一个动作创建者，对吗？它什么时候会被调用？我只是更喜欢作为一个动作创建者发送这样的东西，是的，这样你就可以在你的减速机中根据需要处理它。。传递只是一个传递所有其余内容的函数，即不做任何其他事情，作为插件/扩展…可能会这样做，因此除了@usedtobefatt指出的反应式解决方案之外，您还可以主动通知用户。非常感谢您的见解。有几个问题需要澄清。首先，所有的创造者都应该付诸行动吗？您能详细说明一下什么是中间件模式和插件的传递方式吗？checkToken只是一个动作创建者，对吗？它什么时候会被调用？我只是更喜欢作为一个动作创建者发送这样的东西，是的，这样你就可以在你的减速机中根据需要处理它。。pass-through只是一个函数，它可以传递所有其他的内容，即不做任何其他的插件/扩展。。。