前端通过`iframe`实现单点登录（SSO）的数据传输

​这个方案主要是前端来操作，后端要做的就是多端token或者登录标识符统一
实在不行就加接口拿着登陆的标识符去请求别的系统的登录，然后再分发。

• 首先，创建一个全局方法，挂在VUE上，方便直接调用：

/*
 * @Author: Chris 
 * @Date: 2022-10-20 14:14:18 
 * @Last Modified by: Chris
 * @Last Modified time: 2022-10-25 10:50:45
 * @description: 具体实现方法就是在页面中打开一个目标网站的隐藏iframe，然后向该域名下存储TOKEN
 */

import Vue from "vue";

// 这个e是入参，特意添加了一个'UM' 作为标识符，可以在接受的时候避免拿到污染数据
// let e = {
//     type: 'UM',
//     token: TOKEN.data
//   }

Vue.prototype.$SET_All_Platform_Token = (e) => {
    var iframe = document.createElement("iframe");
    iframe.style = 'display:none'
    iframe.src = process.env.VUE_APP_BUSINESS + '/#/login/qrcode';
    document.body.append(iframe);
    iframe.onload = () => {
        setTimeout(function () {
            iframe.contentWindow.postMessage(e, process.env.VUE_APP_BUSINESS);
        }, 500);
        setTimeout(function () {
            iframe.remove();
        }, 2000);
    }
}

然后，在目标网站的挂载页面添加一个监听，将数据存在域名下：

/*
 * @Author: Chris 
 * @Date: 2022-07-27 11:17:26 
 * @Last Modified by: Chris
 * @Last Modified time: 2022-10-17 13:43:12
 * @description: 监听收到的type为'UM'的数据，然后存起来当作登录信息，可以存token，或者别的标识符
 */
 
window.addEventListener(
      "message",
      function (event) {
        if (event.data.type == "UM") {
          window.localStorage.setItem("UM_accessToken", event.data.token);
        }
      },
      false
    );

• 如果是多个系统之间，可以维护一个列表，然后循环一下就可以。
• 我大致写了一个方案，部分信息打个码：