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

我有一个vuejs前端，仅当用户登录时才显示菜单。注销时，我将变量

isloged

更新为false：它隐藏菜单

如果我在多个选项卡（已登录）中打开我的前端，我将在其中一个选项卡中注销：我的菜单隐藏在我注销的选项卡中，但在所有其他选项卡中，我的“仅登录”菜单仍在此处

我有一个函数

checkifisloged

，它检查是否存储了令牌（证明用户已登录），如果没有，则将

isLogged

变量传递给false。我可以使用此功能来保持一致性，并在任何选项卡中更新

isloged

，但最佳做法是什么？定期运行它？仅当用户关注选项卡时？其他想法？

将值写入localStorage key时，会在所有选项卡（在同一域上打开）中触发存储事件，但写入的选项卡除外。可以利用此功能跨选项卡传递消息。

以下是api：

---

每当对存储对象进行更改时，都会触发StorageEvent（请注意，会话存储更改不会触发此事件）。这在进行更改的同一页面上不起作用-它实际上是域上使用存储的其他页面同步所做更改的一种方式。其他域上的页面无法访问相同的存储对象。

您可以在本地存储更改上放置事件侦听器并正确处理它们，而不是连续检查存储

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的更多信息。

谢谢，正是我需要的谢谢，正是我需要的