主要设计思路

1. 独立的登陆页面项目 ，所有子系统的公共登陆页；
2. axios请求拦截 ，子系统要做请求拦截,判断是否有token,token可以存在localstory和cookie里；
3. 登陆页 ，登陆成功后,token存入localstory/domain中,重定向到子系统；

独立的登陆页面项目

1. 使用vue-cli4 脚手架搭建公共登陆页系统 ，编写登陆页,(这很简单)
2. 子项目路由拦截必须修改

子系统axios设置

1. 请求拦截

// 请求拦截

var mainUrl="https://123123.flagUrl.com"  //登陆页线上部署地址,  根据项目修改
axios.interceptors.request.use(config=>{
//1.在cookie拿取('Authorization'),  前提npm安装''vue-cookies''
   var accessToken= cookies.get('Authorization')
   if(!accessToken){
     accessToken = localStorage.getItem('accessToken')
   }
   if (accessToken) {
   config.headers.Authorization = accessToken;
 } else {
   window.location.href = mainUrl?redirectUrli=' + window.location.href; 
 }
})

1. 响应拦截

// 请求拦截
axios.interceptors.response.use(function (response) {
   //1 判断成功200&&token是否过期
   //2 不成功 路由跳转
   window.location.href = mainUrl?redirectUrli=' + window.location.href; 
   //逻辑根据业务写
})

主登陆页代码

1. 登陆成功逻辑

// 简写逻辑  具体根据自己项目改
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
//if 200
      let result = res.data;
      let str = window.location.hash;
      document.cookie = "Authorization=" +result.token +
        ";domain=.flagUrl.com;path=/";
        
      localStorage.setItem('accessToken', accessToken);
      let oldUrls=str.split("redirectUri=")
      window.location.href = decodeURIComponent(
        oldUrls[ oldUrls - 1]
      );
   })

主要难点

1. 所有子项目路由必须以.flagUrl.com结尾
   具体原因,自行百度 “跨域”
2. cookie设置 domain 使用, 设置localstory
3. **如果子系统 已经是老项目 不能用.flagUrl.com **
   可以主登陆页面和子系统页面 都隐藏一个相同域名的iframe作为中间信息传递, 目的都是为了多系统之间的token传递