postMessage 实现A系统新开B系统页面，B系统获取A系统token，从而通过B系统登录验证

最新推荐文章于 2024-08-04 00:46:01 发布

GiGi-L

最新推荐文章于 2024-08-04 00:46:01 发布

阅读量970

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/Loria1/article/details/117549973

版权

本文介绍了在A系统和B系统跨域的情况下，如何利用postMessage实现从A系统新开B系统页面并传递token，以此完成B系统的登录验证。通过在8080和8081端口的应用示例，详细阐述了窗口间通信的流程，包括iframe场景下的直接通信和同级页面间的window.opener通信方式。

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

业务场景：

A系统和B系统相互跨域，
A系统开起B系统，B系统需要获取登录验证信息
A，B系统都是通过token验证登录信息

举例说明：我在我本机8080和8081两个端口分别起了两个应用，8080端口的应用打开8081端口的应用，8081的页面被打开后发送消息给8080端口页面，8080页面收到消息后将token发给8081页面

8080页面代码：

let popup = window.open('http://localhost:8081/#/testIframe', 'blank_') // 打开8081端口的页面 获取新窗口对象
window.onload = function () {
  window.addEventListener('message', onmessageBack)
}
function onmessageBack (event) {
  if (event.origin === 'http://localhost:8081') { //
    console.log('8080收到请求，即将发送token')
    popup.postMessage('token is aaaaaa', 'http://localhost:8081') // 收到8080的请求后发送token非8080
  }
}