使用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请求一样可以监听，所以不同类型的文件传输方式都没有经过检验，看文档上面目前只允许字符串类型。