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

最新推荐文章于 2025-03-07 15:55:04 发布

造bug小霉霉

最新推荐文章于 2025-03-07 15:55:04 发布

阅读量5.4k

点赞数 5

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_54065476/article/details/137457747

版权

本文介绍了前端单点登录的概念，如何通过共用token实现多个系统免登，以及在Vue3中利用iframe和postMessage实现跨域下的登录共享。重点展示了在A页面向B页面传递token的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

什么是单点登录？

实现原理？

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

如何实现？

什么是单点登录

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

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

实现原理

多个系统共用同一个登录获取的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);

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