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

Question

我有一个 vuejs 前端，只有在用户登录时才显示菜单。当我注销时，我将变量更新isLogged为 false：它隐藏了菜单。如果我在多个选项卡（已登录）中打开我的前端，我会在其中一个选项卡中注销：我的菜单隐藏在我注销的选项卡中，但是，在所有其他选项卡中，我的仅登录菜单仍然存在。我有一个函数checkIfIsLogged可以检查是否存储了令牌（这证明用户已登录），如果没有，则将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 的更多信息。