问题概述

公司目前有几个使用Vue.js+Java开发的PC端项目，每个项目都有不同的服务器和独立的数据库和各自的登录界面，老板要我们给这几个项目做一个统一的登录入口，登录后点击某个项目链接能新开窗口跳转到该项目。其实就是实现单点登录，但是后端人员说几个项目都是各自独立的，无法做到常规的单点登录，只能重新写一个服务给一个登录接口返回所有项目的token，剩下的就需要我们前端处理了。

思路总结

查询资料后发现可以通过iframe+postMessage实现跨域的token传递（注意，token在不同主域名的情况下不能用cookie设置，所以我使用localStorage存储）。

处理步骤

1、登录主系统，获取各个子系统的token；
2、点击项目地址链接后，创建一个隐藏iframe并使用postMessage将token传递过去，iframe接收后将token存到iframe所对应的域名下的localStorage；
3、通过window.open(url, ‘_blank’)打开一个新地址；
4、移除该iframe。

关键代码

 	  // 创建iframe存储localStorage
      var iframe = document.createElement('iframe')
      iframe.setAttribute(
        'style',
        'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'
      )
      iframe.src = address
      document.body.append(iframe)
	  // 传递token给加载完成后的iframe
      iframe.onload = () => {
        iframe.contentWindow.postMessage(
          {
            token: this.tokenMap[key]
          },
          '*'
        )
        setTimeout(function () {
          iframe.remove()
        }, 5000)
        setTimeout(function () {
          window.open(addr, '_blank')
        }, 0)
      }