javascript - 如何使用vuejs确保多个选项卡之间的变量一致性

Question

我有一个 vuejs 前端，仅在用户登录时才显示菜单。当我注销时，我将变量 isLogged 更新为 false:它隐藏了菜单。

如果我在多个选项卡(已登录)中打开前端，我会在其中一个选项卡中注销:我的菜单隐藏在我注销的选项卡中，但是在所有其他选项卡中，我的仅登录菜单仍然是这里。

我有一个函数 checkIfIsLogged ，它检查是否存储了 token (证明用户已登录)，如果没有，则将 isLogged 变量传递给 false。我可以使用此函数来保持一致性并更新任何选项卡中的 isLogged 但最佳实践是什么？定期运行？仅当用户关注选项卡时？还有其他想法吗？

Answer 1

您可以在 localStorage 更改上放置事件监听器并正确处理它们，而不是不断检查存储。

window.addEventListener('storage', function(event) {  
  if (event.key === 'token'&& !event.newValue) {
      console.log('Logged out from another tab!');
      // do whatever you need after logout
  }
});

因此，当有人从另一个选项卡更改 localStorage 时 - 此事件将被触发。请注意，该事件会在除已完成更改的选项卡之外的所有选项卡上触发。您可以阅读有关 StorageEvent 的更多信息 here .