在开发过程中，有一些奇葩产品会给一些奇葩需求(至少在前端眼里是奇葩需求)，

比如父页面不需要登录，点击某个位置，从新页面打开某个详情页，这个详情页也不需要登录，但是这个详情页的某个功能，需要登录，所以点击这个功能后，跳转到登录页，登陆完后再次回到当前页面，这个时候问题来了，父页面还处于未登录状态，但是轻轻也的新页面已经登陆了。

这个时候，怎么处理，新页面打开的登录页登录状态，和父页面的登录状态相同步呢？来，跨页面通讯postMessage可以解决。

父页面代码

  mounted() {
    setTimeout(() => {
      window.addEventListener('message', function (e) {
        if (e.data == 0) {
          location.reload()
        }
      })
    }, 1000)
  },

详情页代码
 

data() {
    return {
      tokens: '',
    }
 },
 created() {
     this.tokens = this.user.token
 },
 watch: {
    tokens(val) {
      if (val) {
        var message = val ? 0 : 1
        opener.postMessage(message)
      }
    },
 },

如果觉得不太理解，可以移步b站
【前端】h5 postMessage 展示_哔哩哔哩_bilibili