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>