使用postMessage做单点登陆

      最近公司需要做一个单点登陆,但是产品那边不希望用户跳转或者打开新的页面,所以方案使用了iframe 和postmessage来实现。

     先简单说一下实现单点登陆的方式。

第一: 使用cookie来做。拿到后端返回的cookies凭证,每次请求带上。比较常用的方式。

缺点有2个:安全性不高,cookies容易被人窃取。另一个就是不能跨域

第二:使用token,返回一个新的token来验证。后端返回一个token验证,请求的时候带上。缺点就是万一加密验证被获取了,也容易被人攻击。

第三:就是页面跳转。后端返回一个加密的token,跳转到子应用。缺点就是需要跳转,用户体验稍微差点。

我们采取一个比较特殊的方式,在react项目中,iframe上面使用postMessage去完成请求拿到token完成单点登陆。

直接贴代码了。

发送请求

const sendMessage = (frameId, originSrc, message) => {

let sendData = {

data: message,

i_token:window.localStorage.getItem('kp.token')

};

let id = frameId ||0;

window.frames[id].postMessage(JSON.stringify(sendData), originSrc);

}

监听并且回复请求

const listenMessage = (source, message) => {

window.addEventListener('message',function(event){

if (event.origin !== source)

return;

let data = {

msg: message,

i_token:window.localStorage.getItem('kp.token')

}

event.source.postMessage(JSON.stringify(data), event.origin);

},false);

}

postMessage 并且不像http请求一样可以监听,所以不同类型的文件传输方式都没有经过检验,看文档上面目前只允许字符串类型。

你可能感兴趣的:(使用postMessage做单点登陆)