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

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

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

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

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

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

 <template>  
<v-content> 

<v-container fluid fill-height class="container">
<iframe ref="iframe" :src="iframeSrc" frameborder="0"></iframe>

</v-container> </v-content>
</template>
<script>
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>

 

posted @ 2020-11-10 15:32  糊涂蜗牛  阅读(19759)  评论(0编辑  收藏  举报