背景：都是基于vue2.0开发的两个零碎a和b，都有本人的登录页面，同一个账号能够在两个零碎内登录，现要求，a登录胜利后，能够间接跳到b的主页，b不须要登录。反过来，b从登录页登录后，也能跳到a的主页，a不须要登录。大家晓得protocol（协定）、host（域名）、port（端口）有一个中央不同都会产生跨域景象，也被称为客户端同源策略。a和b两个零碎域名和端口都不同，相互跳转共享token，这是不被容许的，于是就想用cross-storage解决。
步骤：1、a和b各种执行指令npm install cross-storage装置cross-storage。

  2、a和b都创立一个Hub文件，路由文件里配上和login.vue同级别的路由。Hub内容如下![](/img/bVcW7aN)

//Hub.vue
<template>
<div id="hub"></div>
</template>

<script>
import CrossStorage from 'cross-storage';
let CrossStorageHub = CrossStorage.CrossStorageHub;
CrossStorageHub.init([

{origin: /.*119.3.93.*?$/, allow: ['get', 'set']},{origin: /.*192.168.1.*?$/, allow: ['get', 'set']},{origin: /.*gas.deyt.cn(:[1-9]\d*)?$/, allow: ['get', 'set']},{origin: /.*iot.deyt.cn(:[1-9]\d*)?$/, allow: ['get', 'set']},

]);
export default{
}
</script>
配上须要共享token的域名或ip

  3、a登录的时候用localstorage存下登录信息。b在mian的js外面先new一个crossStorage对象，而后在crossStorage的onConnect事件的回调里拿到a存贮的登录信息。如果每次都从onConnect回调里拿登录信息，速度比较慢，这里做了一个解决，在第一次拿到登录信息后，b也存到本人的localstorage外面，而后前面每次就从本人的localstorage外面取登录信息。这样就相当于b也登录了。反过来从b跳到a步骤也一样。  4、这里为了标准代码，我在我的项目里建了一个storage.js，在这个js外面定义取登录信息的办法。而后new对象和onConnect都放在这个办法外面,内容如下![](/img/bVcW7cz)，

// storage.js
import CrossStorage from 'cross-storage'
let host = window.location.host,httpData = host.split(":"),protocol = window.location.protocol;
let portHttp = httpData?httpData[0]:'';
let portValue;
if(host.indexOf('192.168.1.245') >= 0){
portValue = protocol+"//"+(portHttp ? portHttp+':9990':'');

}else if(host.indexOf('gas.deyt.cn') >= 0){
/正式环境/
portValue = protocol+'//iot.deyt.cn';
}else{
/开发/
portValue = protocol+"//"+(portHttp ? portHttp+':8081':'');
}
var storage
/获取Storage/
export const getStorage = function(name,callback) {
storage = new CrossStorage.CrossStorageClient(portValue+'/#/Hub',{

timeout: 10000,

});
return new Promise(function (resolve, reject) {

storage.onConnect().then(function () {  return storage.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 跨域个性，再配合一个 “直达页面”，来实现所谓的“跨域存储”。