单点登录：两个不同域名Vue项目相互跳转并且传递Token

作为前端 公司里面单点登录比较常见 ，提升用户体验，加快了访问资源效率。同时他也可以仅由前端实现！

什么是单点登录？

实现原理？

不同情况下使用单点登录？

如何实现？

什么是单点登录

单点登录，字面意思 ：仅点一次就可以登录。

       在公司的业务系统中，往往会有多个系统，并且这几个系统对应的都是同一个登录接口。次次登录对于公司用户体验肯定是不好的，对于后端上请求登录接口的频率也会增多。所以就有了这个单点登录：多个系统使用同一个登录接口，只需要登录一次就可以使得多个系统免登进入。

实现原理

       多个系统共用同一个登录获取的token，就是相当于父系统有多个子系统，这几个子系统共用父系统的访问令牌。父系统就是我们浏览器的cookie，相当于一个认证中心，浏览器的cookie保存了我们的访问令牌，就可以在子系统登录的时候拿到这个cookie的访问令牌进行免登。

不同情况下的单点登录？

1.同域名下的两个系统互相访问

       这个我还没做过 有需求的可以去看看别的博主写的啦 可以一起分享~

2.跨域下的两个系统互相访问

在跨域下 cookie是不共享的 所以我们直接部署一个认证中心 为我们的系统提供专门的服务，系统登录统一在这个认证中心进行登录，并将token写入cookie中，每个系统进入都可以自动获取到认证中心的cookie是否登录过。就是说认证中心携带的cookie是互通的。

如何实现？

直接上代码吧：A网页点击一个按钮去访问B网页

A网页：

B网页：

不用写在生命周期里面加载 我用的是vue3组合式写法 写在跟onMounted同一级

A网页：

// 获取 token
    var token = store.token;
    // 创建一个iframe，在iframe中加载一个跨域的网页
    var iframe = document.createElement("iframe");
    iframe.src = "http://11.222.333/b"
    document.body.append(iframe);
    // 使用postMessage()方法将token传递给iframe
    setTimeout(function () {
        iframe.contentWindow.postMessage(token, "http://11.222.333/b");
        window.open(iframe.src)
    }, 4000);

 

B网页：

// 监听跨域跳转获取新token存入localStorage实现获取访问令牌
window.addEventListener('message', function (event) {
    store.setToken(event.data)// 我利用store将localStorage封装了一层 实际上是localStorage.setItem('token',event.data)
}, false);

 有什么问题可以一起讨论~