window.postMessage 在iframe父子页面数据传输，页面之间跨域共享、传输数据，实现单点登录

最新推荐文章于 2024-06-25 11:02:53 发布

kevin_xingka

最新推荐文章于 2024-06-25 11:02:53 发布

阅读量1.1k

点赞数

分类专栏：前端工程化文章标签：前端 javascript html

本文链接：https://blog.csdn.net/kevin_xingka/article/details/121294550

版权

本文介绍了如何利用Ifarme和window.postMessage技术在跨域场景下实现单点登录（SSO）。通过在登录页面获取token后，通过message事件在父子页面间传递，确保用户在跳转到其他后台时保持登录状态。文章提供了两种实现方案，并提醒了在方案二中需要注意的sessionStorage共享问题和版本号处理。

摘要由CSDN通过智能技术生成

项目需求

实现单点登录多后台，比如登录淘宝后，跳转链接到天猫时，天猫处于登录中的状态。

实现方式

基于 Iframe+Postmessage，相互之间发送登录token，实现SSO(SingleSignOn)单点登录功能。

实例

期望结果：假设登录昆仑后台拿到token后，跳转到邻汇吧后台时，页面处于登录状态。

方案一：

登录昆仑后台拿到token后，跳转到邻汇吧后台时，向邻汇吧内嵌隐藏的昆仑 iframe 发送 getToken 的消息
iframe.contentWindow.postMessage('getToken', targetOrigin)
昆仑后台收到消息后（判断 window.parent 是否为邻汇吧后台域名），判断消息是否为 getToken，如果是，发送消息（携带token）给父级 window.parent.postMessage(token, targetOrigin);
邻汇后台监听 message，收到消息（data.data），判断来源（data.origin）是否为昆仑后台，存储到 localStorage 中
window.addEventListener('message', data => {}, false);
以服务的方式分别打开两个html文件，修改各自的 origin、targetOrigin 后，kunlun 页面点击发送按钮，linhui 页面查看是否刷新显示了token

test.html

<body>

  <h2>后台接收token 方案一</h2>

  <div>
    token：
    <span class="token"></span>
  </div>
  <iframe class="iframe" src="" frameborder="0"></iframe>
  <button onclick="getToken()">从iframe拿到token<

最低0.47元/天解锁文章

kevin_xingka

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
window.postMessage 在iframe父子页面数据传输，页面之间跨域共享、传输数据，实现单点登录

项目需求实现单点登录多后台，比如登录淘宝后，跳转链接到天猫时，天猫处于登录中的状态。实现方式基于 Iframe+Postmessage，相互之间发送登录token，实现SSO(SingleSignOn)单点登录功能。实例期望结果：假设登录昆仑后台拿到token后，跳转到邻汇吧后台时，页面处于登录状态。方案一：登录昆仑后台拿到token后，跳转到邻汇吧后台时，向邻汇吧内嵌隐藏的昆仑 iframe 发送 getToken 的消息iframe.contentWindow.post
复制链接

扫一扫

专栏目录