单点登录介绍
单点登录指的就是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。再简单点说的话就是单点登录的本质就是在多个应用系统中共享登录状态。
就拿阿里举个例子
天猫淘宝实现了单点登录,那么你只需要登录其中的任意一个,在访问另一个网站时就无须再次登录了。
1.1localStroage 实现单点登录
// 验证postMessage的传递
登录注册中心A系统（http://192.168.1.22:8080）在登录的时候将之后拿到的核心信息 token，存储到对应兄弟系统的localStorage中，实现登录信息共享
init () {
// 获取 token
const token = "a9bab2fe-7630-43a3-8c9f-10cee0b4253c"
const src = "http://192.168.1.22:8081"
// 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML
const iframe = document.createElement("iframe")
iframe.src = src
// 使用postMessage()方法将token传递给iframe
iframe.onload = () => {
iframe.contentWindow.postMessage(token, src)
// iframe.remove()
}
document.body.append(iframe)
}
B系统也就是 src 值所对应系统代码
/ 在这个iframe所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStorage
window.addEventListener('message', function (event) {
// console.log('接收到even事件：')
// console.log(event)
// 配置兄弟站点列表
const brotherWebsite = [
// 'http://192.168.1.22:8080'
]
// 如果消息源在兄弟站点中
if (brotherWebsite.includes(event.origin)) {
this.localStorage.setItem('www.suczone.com', event.data)
}
}, false)
完工
1.2 父域Cookie
一般来说Session ID是存在Cookie中的,因此,如何让 Session ID（或 Token）在多个域中共享的问题也就变成了如何让多个域名之间共享Cookie。
但是我们知道由于浏览器的同源策略,不同域之间是不能互相访问Cookie的。但同时我们别忘了Cookie有一个特点,那就是父域中的 Cookie 被子域所共享，换言之，子域会自动继承父域中的Cookie。
利用 Cookie 的这个特点，不难想到，将 Session ID（或 Token）保存到父域中不就行了。没错，我们只需要将 Cookie 的 domain 属性设置为父域的域名（主域名），同时将 Cookie 的 path 属性设置为根路径，这样所有的子域应用就都可以访问到这个 Cookie 了。
不过这要求应用系统的域名需建立在一个共同的主域名之下，如 tieba.baidu.com 和 map.baidu.com，它们都建立在 baidu.com 这个主域名之下，那么它们就可以通过这种方式来实现单点登录。
总结：此种实现方式比较简单，但不支持跨主域名。
