vue解决iframe登录

在 Vue 中解决 iframe 登录问题，你可以使用 postMessage 方法进行跨域通信。以下是一个简单的示例：

1. 在 iframe 内部的页面中，监听 message 事件，接收来自父窗口的消息并处理登录逻辑：

// iframe 内部页面
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://父窗口域名') return; // 可选的安全验证

  const data = event.data; // 接收到的消息数据

  if (data.type === 'login') {
    // 处理登录逻辑
    // ...
    // 发送消息给父窗口，通知登录状态
    window.parent.postMessage({ type: 'loginStatus', loggedIn: true }, 'http://父窗口域名');
  }
});

2. 在 Vue 组件中，嵌入 iframe 并发送消息给 iframe：

<template>
  <div>
    <iframe ref="myIframe" src="http://子窗口域名"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    const iframe = this.$refs.myIframe;

    // 发送消息给 iframe 进行登录
    iframe.contentWindow.postMessage({ type: 'login' }, 'http://子窗口域名');

    // 监听来自 iframe 的消息
    window.addEventListener('message', (event) => {
      if (event.origin !== 'http://子窗口域名') return; // 可选的安全验证

      const data = event.data; // 接收到的消息数据

      if (data.type === 'loginStatus' && data.loggedIn) {
        // 登录成功逻辑
        // ...
      }
    });
  },
};
</script>

这样，你就可以通过 postMessage 方法在 Vue 中解决 iframe 登录的问题了。注意在代码中的域名验证部分，可以根据实际需求进行安全验证。