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

最新推荐文章于 2026-01-28 20:37:36 发布

原创

最新推荐文章于 2026-01-28 20:37:36 发布 · 1.3k 阅读

标签

#vue.js #前端 #javascript

收录于

一、概述

在一些应用场景中，可能需要将某个页面通过 iframe嵌入到另一个应用中，并实现免登录功能。本文以Vue.js为例，详细介绍如何通过 iframe实现免登录功能的思路和步骤。

二、技术思路

统一认证：通过单点登录（SSO）实现用户在多个系统间的免登录。
Token传递：在主应用中生成访问Token，通过 iframe传递给子应用，子应用验证Token后实现免登录。
消息传递：利用 window.postMessage进行跨域消息传递，实现认证信息的安全传输。

三、实现步骤

1. 主应用生成Token并传递

主应用在用户登录后生成一个Token，并通过 iframe的URL参数或 postMessage方法将Token传递给子应用。

// 主应用中的方法
function generateToken() {
  // 假设我们生成了一个Token
  const token = 'generatedToken12345';
  return token;
}

function embedIframe() {
  const token = generateToken();
  const iframe = document.createElement('iframe');
  iframe.src = `https://subapp.example.com?token=${token}`;
  document.body.appendChild(iframe);
}

embedIframe();