前端之间跨域通信实现数据共享

window.postMessage() 方法允许来自不同源的脚本采用异步方式进行有限的通信。在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间, 一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener）然后在窗口上调用 targetWindow.postMessage() 方法分发一个  MessageEvent 消息。
假设有两个系统A和B，分属不同的域名下，A登录系统后前端获得token或相关信息存在localStorage，同时希望共享同步到B系统使得用户进入B系统而不需要重新登录，该怎么实现呢？
首先在A系统前端页面，创建一个隐藏的iframe，然后通过postMessge()往窗口里发送数据到B系统的前端页面，在B系统前端页面创建了一个事件监听器来接收messge消息即可，而且重要的是需要判断消息来源方的URL，因为消息可以来自任何地址，要确保消息是来自一个验证过的地址，然后再处理
。
A系统：
let iframe = document.createElement('iframe');
iframe.src ="B系统URL";
iframe.style.display = "none";
document.body.append(iframe);
iframe.onload = function () {
    setTimeout(function () {
        iframe.contentWindow.postMessage(token,"B系统URL");
    }, 10);
    setTimeout(function () {
        iframe.remove();
    }, 5000);
}
B系统监听消息：
window.addEventListener('message', function (event) {
    let origin = event.origin || event.originalEvent.origin;
    if (origin==="A系统URL") {
           window.localStorage.token=event.data;
    }