前端：如何在一个页面登录了，然后告知另外一个页面已经登录？

背景

设想一下，当我们打开了同一个网站的不同页面，假设用户在页面A登录了，那么为了提高用户的体验，如何通知其他页面用户已登录呢？

方法一 BroadcastChannel

BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

Note: 此特性在 Web Worker 中可用

构造函数

BroadcastChannel()
创建一个链接到命名频道的对象。

事件处理程序

BroadcastChannel.onmessage
event handler ，用于定义当该对象上触发了 message 事件时要执行的函数。
broadcastchannerl网站

案例

登录页面

HOME页面

效果

broadcastchannel

let bc = new BroadcastChannel("login");

bc.onmessage = (event) => {
  const { data } = event;
  if (data === "true") {
    window.alert("你在其它页面登录了");
  } else if (data === "false") {
    window.alert("你在其它页面退出登录了");
  }
};
export default bc;

根文件

在项目入口文件中引入broadcastchannel

登录页面

只需要在登录成功时，调用broacastchannel的onmessage方法即可，然后其他页面就会收到用户已登录的通知。

方法二 监听Storage

let postingMessage = false;
let bc = {
  postMessage(message: string) {
    postingMessage = true;
    try {
      window.localStorage.setItem("logged-in", message);
    } finally {
      postingMessage = false;
    }
  },
};
window.addEventListener("storage", function (event) {
  console.log(event);
  if (
    !postingMessage &&
    event.storageArea === window.localStorage &&
    event.key === "logged-in"
  ) {
    try {
      if (event.newValue === "true") {
        window.alert("你在其它页面登录了");
      } else if (event.newValue === "false") {
        window.alert("你在其它页面退出了");
      }
    } finally {
      window.localStorage.removeItem(event.key);
      console.log(event);
    }
  }
});

export default bc;

总结

broadcast的在IE浏览器不支持，但是可以通过监听storage来解决IE上的问题。。。
还有就是楼主基础不太好，各位自行查阅资料吧。
欢迎各位补充