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 = tWindow;
if (mapFrame.attachEvent) {
// eslint-disable-next-line
mapFrame.attachEvent('onload', function() {
iframeWin.postMessage(
{
        //定义接收⽅法，⽅便精准接收
iframeClick: 'getParams',
params: {
        　//传递的值
key: Item('token', ken),
},
},
'*',
);
});
} else {
// eslint-disable-next-line
iframeWin.postMessage(
{iframe嵌套页面加载慢
iframeClick: 'getParams',
params: {
key: Item('token', ken),
},
},
'*',
)
;
};
}
},
};
</script>
iframe引⼊的页⾯接⼝传递的参数
<script>
export default {
data() {
return {
myToken: '',
};
},
mounted() {
// 接受vue传过来的值
window.addEventListener('message', event => {
const data = event.data;
switch (data.iframeClick) {
case 'getParams':
localStorage.setItem('token', Token);
}
});
},
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。