前端项目灰度发布（前后端分离项目）

前端项目灰度发布

现有问题

• 公司有新项目和老项目并存
• 部分客户使用新项目，部分客户使用老项目。
• 用户登录后才知道使用那个项目。
• 两个项目不同子域名无法共享localStroge

解决方案

实施前提

1. 首先前提公司的后台登录的鉴权系统是独立开发，一套鉴权支持所有的后台项目。
2. 前端的路由守卫共享同一套的localStroege的设置，比如两个项目的用户信息的key相同。

核心方法

1. 利用 window.document.querySelector("iframe").contentWindow.postMessage(data, url);进行夸域传递信息
2. 利用localStroge等方式，共享数据。

具体实施

1. 新项目创建一个页面用来监听从老页面发来的信息
   1. 因为为了避免业务数据的干扰，建议创建单独的html页面，用来访问。
      1. 因为该文件和业务无关，且文件很小，建议直接放到assets里面，做静态文件访问。

      window.addEventListener('message', function (e) { // 监听 message 事件
            if (e.origin == "老项目域名url") { // 验证消息来源地址
                localStorage.setItem(key, e.data);
                return;
            }
    });
   

2. 老项目登录页面进行调整
   1. 项目的login页面进行iframe嵌套，并创建windows通讯。
      1. 创建iframe，用方法动态创建的好处
         1. 单独方法，单独服务，避免和主服务耦合。
         2. 可以在登录后判断为新项目使用用户直接在创建，避免插入到主dom里面。

          creatiframe() {
           const link = document.createElement('iframe');
           link.setAttribute('src', "新项目的域名/assets/index.html");
           link.style.display = 'none';
           document.body.appendChild(link);
          }
      

      2. 用户的信息传递
         1. 传递指定信息。
         2. 传递的数据格式为字符串。

         window.document.querySelector("iframe").contentWindow.postMessage("string", "新项目的域名");
      

3. 登录后的跳转
   1. 登录后获取用户信息后，根据用户状态进行跳转到指定子域名。

老域名登录流程

graph TB
老域名--重定向-->老域名/login--加载新域名域名静态资源-->登录-->a[获取userInfo]--web_version=3.0-->f[旧项目首页]
a--web_version=3.1-->向新项目通讯-->新项目拦截通讯-->存放本地--跳转-->b[新项目域名]