背景：基于vue2.0开发的a和b两个系统，都有各自的登录页面，同一个账号可以在两个系统中登录，现在需要，经过a登录成功，可以直接跳转到b的首页，b不需要登录。反之，b从登录页面登录后，也可以跳转到a的首页，a不需要登录。我们都知道protocol（协议）、host（域名）、port（端口）在一个地方不一样，就会造成跨域现象，也叫客户端同源策略。a、b两个系统的域名和端口不同，互相跳转，共享token。这是不允许的，所以想用跨存储来解决。步骤：1、a、b各种执行指令npminstallcross-storage安装cross-storage。2、a和b都创建一个Hub文件，route文件配置一个和login.vue同级别的路由。Hub内容如下！[](/img/bVcW7aN)//Hub.vue匹配需要共享token的域名或ip。3、a登录时，使用localstorage保存登录信息。b首先在mian的js中新建一个crossStorage对象，然后在crossStorage的onConnect事件回调中获取到a中存储的登录信息。如果每次都从onConnect回调中获取登录信息，速度是比较慢的。这是一个过程。第一次获取登录信息后，b也存储在自己的localstorage中，然后每次都从自己的localstorage中获取。将其中的登录信息。这相当于登录b。反向从b跳到a步也是如此。4.这里为了规范代码，我在项目中建了一个storage.js，在这个js中定义了获取登录信息的方法。然后new对象和onConnect都放在这个方法里面，内容如下！[](/img/bVcW7cz),//storage.jsimportCrossStoragefrom'cross-storage'lethost=window.location.host,httpData=host.split(":"),protocol=window.location.protocol;让portHttp=httpData?httpData[0]:'';letportValue;if(host.indexOf('192.168.1.245')>=0){portValue=protocol+"//"+(portHttp?portHttp+':9990':'');}elseif(host.indexOf('gas.deyt.cn')>=0){/正式环境/portValue=protocol+'//iot.deyt.cn';}else{/development/portValue=protocol+"//"+(portHttp?portHttp+':8081':'');}varstorage/getStorage/exportconstgetStorage=function(name,callback){storage=newCrossStorage.CrossStorageClient(portValue+'/#/Hub',{超时：10000，}）；returnnewPromise(function(resolve,reject){storage.onConnect().then(function(){returnstorage.get('infor');}).then(function(res){resolve(JSON.parse(res)));})['catch'](function(err){reject(err);});});这个js不仅可以定义取信息的方法，还可以定义保存的方法，以及方法的删除。然后在mian.js中引入这个方法，然后在对应的业务逻辑中在编辑器中调用此get方法。5.需要注意的是，localstorage只能存储字符串，所以如果登录信息是一个对象，使用JSON.stringify()处理后再存储。抓取时使用JSON.parse()处理。原理：所谓“跨域存储”，是通过window.postMessage()api跨域特性和一个“中转页面”完成的。
