cross-storage 浏览器 Web 跨域本地缓存

背景:都是基于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


配上需要共享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 跨域特性,再配合一个 “中转页面”,来完成所谓的“跨域存储”。

你可能感兴趣的