vue项目使用iframe嵌入另一个vue项目的页面

一、需求：2个vue项目使用的一个登录界面，要共用token

二、需求原因：因为前端vue管理界面是菜单一个系统和内容一个系统， 最开始登录也是另外一个系统。

　　　　　      现在登录系统不单独做一个独立系统，因为登录URL跳转容易被钓鱼，就打算把登录写在菜单的vue项目。

三、遇到问题：因为是两个vue项目，现在菜单系统的vue项目使用iframe来嵌入另一内容vue项目。登录得到的token不能共享。

四、解决思路：使用 postMessage 把菜单项目的token传递给内容vue项目

 <template>  

> 

export default {
  mounted() {
    const mapFrame = this.$refs.iframe;
    const iframeWin = mapFrame.contentWindow;
    if (mapFrame.attachEvent) {
      // eslint-disable-next-line
      mapFrame.attachEvent('onload', function() {
        iframeWin.postMessage(
          {
　　　　　　　　//定义接收方法，方便精准接收
            iframeClick: 'getParams',
            params: {
　　　　　　　　　//传递的值
              key: localStorage.getItem('token', this.token),
            },
          },
          '*',
        );
      });
    } else {
      // eslint-disable-next-line
      mapFrame.onload = function() {
        iframeWin.postMessage(
          {
            iframeClick: 'getParams',
            params: {
              key: localStorage.getItem('token', this.token),
            },
          },
          '*',
        );
      };
    }

  },
  
};
</script>

 

iframe引入的页面接口传递的参数

<script>
export default {
  data() {
    return {
      myToken: '',
    };
  },
  mounted() {
    // 接受vue传过来的值
    window.addEventListener('message', event => {
      const data = event.data;
      switch (data.iframeClick) {
        case 'getParams':
          this.myToken = data.params.key; // 这样就拿到了vue传过来的params
          console.log(this.myToken);
          localStorage.setItem('token', this.myToken);
      }
    });
  },
};
</script>