0
点赞
收藏
分享

微信扫一扫

前端:如何在一个页面登录了,然后告知另外一个页面已经登录?

女侠展昭 2022-05-02 阅读 84

背景

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

方法一 BroadcastChannel

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

构造函数

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上的问题。。。
还有就是楼主基础不太好,各位自行查阅资料吧。
欢迎各位补充

举报

相关推荐

0 条评论