最近公司要采用单点登录技术,又不想和传统的单点登录一样,比如说,A系统登录了,再进B系统会直接登录,但是这里有个不好的体验度就是B系统会有一个内部跳转的过程,会重定向到认证中心,再回来。所以这次我们就是要攻克这个跳转的过程,提高这个用户体验度。
废话不多说,开整~~!
先上一个架构时序图
这个方案网上也有大佬用过,算是借鉴了部分思路,但是正好这块是自己以前接触过的一个技术点,所以才想到用这种方式。
a.html页面的代码~~~~(我是后端原谅我写的丑~~~)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guns</title>
<!-- 全局js -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>
<body class="gray-bg">
<p>这是主页</p>
<iframe src="http://www.bb.com:8083/sso/b.html" style="height: 100px;width: 100px;display: block;"></iframe>
</body>
<script type="text/javascript">
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);
</script>
</html>
b.html页面的代码 (同上)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guns</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>
<body class="gray-bg">
<p>这是b页</p>
</body>
<script type="text/javascript">
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);
</script>
</html>
当然直接这样可能是不行的,还要配置hosts哦
127.0.0.1 www.aa.com
127.0.0.1 www.bb.com
然后部署起来就行啦。
访问测试
可以互相通信,单点登录的策略就能实现了,加油!奥力给~~!