| 单点登录跨域iframe互相通信方案 | 您所在的位置：网站首页 › 单点登录跨域问题 › 单点登录跨域iframe互相通信方案 |
单点登录跨域iframe互相通信方案
|
最近公司要采用单点登录技术，又不想和传统的单点登录一样，比如说，A系统登录了，再进B系统会直接登录，但是这里有个不好的体验度就是B系统会有一个内部跳转的过程，会重定向到认证中心，再回来。所以这次我们就是要攻克这个跳转的过程，提高这个用户体验度。
废话不多说，开整~~！
先上一个架构时序图
这个方案网上也有大佬用过，算是借鉴了部分思路，但是正好这块是自己以前接触过的一个技术点，所以才想到用这种方式。
a.html页面的代码~~~~（我是后端原谅我写的丑~~~） Guns这是主页 window.onload = () =>{ var data=JSON.stringify({ msg:'msg', token:'331' }) document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*'); } window.addEventListener('message',function(e){ // 有消息从子级传来时 存贮 tokenData // if(e.source!=window.parent) return; console.log("==========a===========") //e.data即是我们从A传来的数据 这里使用localStorage进行存贮（请勿使用sessionStorage） localStorage.setItem("tokenData",e.data); console.log(e.data); },false);b.html页面的代码 （同上） Guns这是b页 console.log(localStorage.getItem("tokenData")); window.addEventListener('message',function(e){ console.log("==========b===========") // 有消息从父级传来时 存贮 tokenData if(e.source!=window.parent) return; //e.data即是我们从A传来的数据 这里使用localStorage进行存贮（请勿使用sessionStorage） localStorage.setItem("tokenData",e.data); console.log(e.data); var child = JSON.stringify(localStorage.getItem("tokenData")); window.parent.postMessage(child, '*'); },false);当然直接这样可能是不行的，还要配置hosts哦 127.0.0.1 www.aa.com 127.0.0.1 www.bb.com 然后部署起来就行啦。 访问测试
可以互相通信，单点登录的策略就能实现了，加油！奥力给~~！ 源码下载：https://download.csdn.net/download/lj88811498/12919806 |
【本文地址】
公司简介
联系我们