vue项目使用iframe嵌入另一个vue项目的页面
一、需求：2个vue项目使用的一个登录界面，要共用token
二、需求原因：因为前端vue管理界面是菜单一个系统和内容一个系统， 最开始登录也是另外一个系统。
现在登录系统不单独做一个独立系统，因为登录URL跳转容易被钓鱼，就打算把登录写在菜单的vue项目。
三、遇到问题：因为是两个vue项目，现在菜单系统的vue项目使用iframe来嵌入另一内容vue项目。登录得到的token不能共享。
四、解决思路：使用 postMessage 把菜单项目的token传递给内容vue项目
<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>