H5开发 跨域 postMessage 传数据 token

最近遇到一个需求，需要将两个不同域名的h5网站进行数据共享，于是在跳转页面的时候，需要传递token完成登录。

A页面（http://127.0.0.1:8080/search）：

const Cookie = require("js-cookie")

async created () {
  window.addEventListener('message', (e) => {
    if(e.origin != "http://127.0.0.1:8081")
      return
    if (e.data) {
      clearInterval(this.messageInterval)
    }
  }, false)
},
destroyed () {
  window.removeEventListener('message', this.addListener, false)
},
methods: {
  searchClick () {
    let cookie = Cookie.get('auth')
    if (cookie) {
      let auth = JSON.parse(cookie)
      let activityWindow = window.open('http://127.0.0.1:8081/h5-home/activity')
      this.messageInterval = setInterval(() => {
        activityWindow.postMessage(auth.token, 'http://127.0.0.1:8081')
      }, 1000)
    }
  }
}

注意：使用postMessage的时候一定要延时（我这里使用setInterval是为了保证数据接收成功），不然会接收不到数据。
使用window.open时不能带_self参数，不然会关掉A页面，无法进行数据传递。

B页面（http://127.0.0.1:8081/h5-home/activity）：

async created () {
  window.addEventListener('message', this.addListener, false)
},
destroyed(){
  window.removeEventListener('message', this.addListener, false)
},
methods: {
  addListener (e) {
    if (e.origin != "http://127.0.0.1:8080") {
      return
    }

    if (e.data) {
      e.source.postMessage('received',e.origin);
    }

    console.log(e.data) //打印出传输过来的消息
  }
}