iframe嵌入页面实现免登录思路（以vue为例）

在Vue中实现无需登录即可嵌入页面的方法通常涉及到跨域通信和可能的身份验证。以下是一个简化的示例，展示了如何在父页面中创建一个iframe，并通过props向子组件传递一个用于身份验证的token。

1. 父页面（父项目）：

<template>
  <div>
    <iframe-component :token="authToken"></iframe-component>
  </div>
</template>
 
<script>
import IframeComponent from './IframeComponent.vue';
 
export default {
  components: {
    IframeComponent
  },
  data() {
    return {
      authToken: 'your-authentication-token'
    };
  }
};
</script>

2. iframe组件（父项目中的组件）：

<template>
  <div>
    <iframe :src="iframeUrl" width="100%" height="500"></iframe>
  </div>
</template>
 
<script>
export default {
  props: {
    token: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      iframeUrl: 'https://your-embedded-page.com'
    };
  },
  mounted() {
    // 向iframe传递token
    this.postMessageToIframe({
      action: 'authenticate',
      token: this.token
    });
  },
  methods: {
    postMessageToIframe(data) {
      const iframeWindow = this.$el.querySelector('iframe').contentWindow;
      iframeWindow.postMessage(data, '*');
    }
  }
};
</script>

3. 嵌入页面的脚本处理（子项目）：

// 在子页面中的JavaScript中监听消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://your-parent-page.com') return; // 确保消息来源可信
  if (event.data.action === 'authenticate') {
    authenticateUser(event.data.token);
  }
});
 
function authenticateUser(token) {
  // 这里可以根据token进行身份验证，比如设置cookie或localStorage
  // ...
  // 然后通知父页面已经准备好进行进一步的交互
  window.parent.postMessage({ action: 'ready' }, '*');
}

这个示例假设了父页面和嵌入页面同源，如果不同源，则需要处理跨域通信的安全性问题。同时，authenticateUser 函数中应该包含验证token的逻辑，并在成功验证后通知父页面。这样父页面就可以开始与iframe内的应用进行交互了。