最近公司需要做一个单点登陆，但是产品那边不希望用户跳转或者打开新的页面，所以方案使用了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请求一样可以监听，所以不同类型的文件传输方式都没有经过检验，看文档上面目前只允许字符串类型。
