单灯登录（前端实现思路）

最新推荐文章于 2024-03-13 22:34:26 发布

YeRanW

最新推荐文章于 2024-03-13 22:34:26 发布

阅读量258

点赞数

文章标签：前端 vue js

本文链接：https://blog.csdn.net/qq_29098447/article/details/121677769

版权

本文详细介绍了前端如何利用iframe和postMessage()实现单点登录（SSO）机制，包括用户只需登录一次即可访问多个相互信任的应用系统，以及如何在不同域之间共享Token，确保跨域请求的安全性和便捷性。

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

单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之

SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统

SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport，子系统本身将不参与登录操作

当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证

可以选择将 Session ID （或 Token ）保存到浏览器的 LocalStorage 中，让前端在每次向后端发送请求时，主动将LocalStorage的数据传递给服务端

这些都是由前端来控制的，后端需要做的仅仅是在用户登录成功后，将 Session ID （或 Token ）放在响应体中传递给前端

单点登录完全可以在前端实现。前端拿到 Session ID （或 Token ）后，除了将它写入自己的 LocalStorage 中之外，还可以通过特殊手段将它写入多个其他域下的 LocalStorage 中

关键代码如下：

在iframe中加载一个跨域HTMLvariframe = document.createElement("iframe");

iframe.src = "http://app1.com/localstorage.html";

document.body.append(iframe); // 使用postMessage()方法将token传递iframesetTimeout(function(){iframe.contentWindow.postMessage(token,"http://app1.com");},4000);

setTimeout(function () {

iframe.remove();

}, 6000); // 在这个iframe所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStoragewindow.addEventListener('message',function(event){localStorage.setItem('token',event.data)},false);

// 获取 tokenvartoken=result.data.token;// 动态创建一个不可见的iframe，

前端通过 iframe+postMessage() 方式，将同一份 Token 写入到了多个域下的 LocalStorage 中，前端每次在向后端发送请求之前，都会主动从 LocalStorage 中读取Token并在请求中携带，这样就实现了同一份 Token 被多个域所共享

此种实现方式完全由前端控制，几乎不需要后端参与，同样支持跨域（同样思路也可实现一个地方登录另一个地方下线的登录方式）