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>