需求：

        当平台运行多个系统时（"系统一"   
    
    
    ，"系统二" 都是不同时间段开发的）

        可以从"系统一"点击按钮跳转到"系统二"


     


     


     


，并且完成 "系统二" 登录操作 




 




 




，直接显示"系统二"的主页   

   

   

   ，可以视为两套系统使用相同的用户名密码

方案一

通过 window.location.href 修改url 进行跳转

带参数传值方法：

        点击跳转按钮的函数内 url + 参数

let url = http://192.168.200.126:8080/login?account= + param.account + "&password=" + param.password window.location.href = url;

带参数接受方法：

        登录页面

     

     

     

，在Vue 的 created 生命周期钩子函数 调用方法
  




  




  




，先得到url ,单纯的字符串处理  


  


  


  ，将得到的参数填入form表单中 
     
     
     
，触发提交

   




   




   




，再将地址栏显示的用户名密码的明码覆盖掉,就可以直接跳转到 主页了

getRequest() { let url = location.search; //获取url中"?"符后的字串 if(url){ url = url.substring(1) let urlList = url.split(&) let account = urlList[0].split(=)[1] let password = urlList[1].split(=)[1] console.log({account:account,password:password}) this.form.account = account this.form.password = password this.submit() location.href = http://192.168.200.126:8080/#/home } },

或者 参数存在 sessionStorage 里 

url = http://localhost:8080/login?account= + param.account// + "&password=" + param.password window.location.href = url; getRequest() { let url = location.search; //获取url中"?"符后的字串 let param = sessionStorage.length ? JSON.parse(sessionStorage.userInfo):sessionStorage if(url){ // url = url.substring(1) // let urlList = url.split(&) // let account = urlList[0].split(=)[1] // let password = urlList[1].split(=)[1] // console.log({account:account,password:password}) this.form.account = param.account this.form.password = param.password this.submit() location.href = http://localhost:8080/#/home } console.log(param) },

然后将系统二的 用户管理接口CURD接口放到白名单 



 



 



 ，通过Vue 的 跨域调用系统二后台同步用户数据 （或者 通过数据库作业计划执行存储过程进行用户账号增改的同步）

仍然能看到登陆画面

这里的密码给保存明码在 session 中                 ，或者在数据库中保存明码


    




    




    




，这里只存一个表id














，到 “系统二   
    
    
    ”查一下这个明码的用户名密码再登陆                  ，这个明码表的CURD 操作接口 同样是开放白名单或者数据库同步

方案二

通过Vue 的 跨域实现

首先


     



     



     



，明确














，什么是跨域？

        协议 域名/IP 端口 这三个只要有一个不同   
    
    
    ，就会出现跨域    
    
    
。

从别的地方拷过来的例子：

#协议跨域

http://a.baidu.com 访问 https://a.baidu.com；

#端口跨域

http://a.baidu.com:8080 访问  http://a.baidu.com:80；

#域名跨域

http://a.baidu.com  访问  http://b.baidu.com；

再联想到 Vue 的 “vue-axios 前后端分离 跨域访问的实现


     


     


     


”：

(55条消息) Vue项目生成+跳转页面+跨域_圆滚滚大西瓜的博客-CSDN博客_vue跨域跳转

还要考虑两个后台 的 token 

(55条消息) 两个跨域页面进行跳转传参的方案_bigHead-的博客-CSDN博客_跨域跳转页面

好


     


     


     


，开始尝试

未完待续

需求变更 




 




 




，不用试了   

   

   

   ，就这样吧

 ​​​​​​​