Javascript 在写入存储的选项卡上未触发React存储事件

我试图做的是检测身份验证何时更改登录/注销。我的登录表单处于模式，我的应用程序中的某些页面在用户登录时与注销时存在细微差异。因此，我需要检测何时发生这种情况，并重新蚀刻页面数据以获得更新信息

例如，文章页面。你可以上传文章，但必须登录

现在，每当身份验证更改时，我都会将令牌和用户对象写入localStorage。因此，我认为我应该在文章组件上使用存储事件，监听用户对象的更改，并在更改时重新提取数据

这是my Article组件中的代码，它应该检测存储更改删除的代码：

class Article extends Component {
  fetchData() {
    // fetch data
  }

  componentDidMount() {
    this.fetchData();
    window.addEventListener('storage', function(e) {
      console.log('storage fired');
      // this.fetchData();
    });
  }

  componentWillUnmount() {
    // Remove event listener
  }

  render() {
    return (
      // Render article
    );
  }
}

问题是，当我在这个页面上，从我的模式登录并将更改写入存储时，事件不会触发。但是，如果我在同一页面上打开了另一个选项卡，那么事件确实会在那里触发。因此，它适用于所有浏览器选项卡，但我实际登录的选项卡除外

我该如何着手解决这个问题

我也对这个问题的任何其他解决方案持开放态度。问题在于-检测身份验证更改，并在更改时重新加载页面。如果有更好的redux解决方案，我还将用户和令牌对象写入redux存储

编辑：

我在此存储库中用最少的代码重新创建了此问题：

---

为了运行它，您必须在dist文件夹中启动一个本地服务器，比如localhost:3000。然后打开两个选项卡并单击写入存储按钮。警报不会在当前选项卡上触发，但会在其他选项卡上触发。

这是此事件的默认行为

当在另一个文档的上下文中更改了它可以访问的存储区域时，StorageEvent将被发送到窗口

看看：

---

而且

不是100%确定，但通常我放置在构造函数中的所有套接字或事件侦听器都尝试将其移动到构造函数中，同样的情况也会发生。在其他选项卡上触发，但在当前选项卡上不触发。