实际开发中,通过iframe跨域传递数据
业务背景
基于先前的独立的两个或者多个子系统,开发一个具有单点登录的门户系统, 取消子系统的登录逻辑, 通过门户的单点登录访问所有子系统。
核心: 跨域传递token令牌
源头传递token
ts
/**
* data: 传递的动态数据,例如token
* origin: 子系统的访问url
* systemName?: 子系统名字
*/
const postMessageByIframe = (data: any, origin: string, systemName?: string) => {
if (!origin) return
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = origin
document.body.append(iframe)
iframe.onload = () => {
iframe.contentWindow?.postMessage({ token: data, systemName }, '*')
setTimeout(() => {
window.location.href = origin
// window.open(origin)
}, 50)
setTimeout(() => {
iframe.remove()
}, 5000)
}
}
子系统接收跨域传来的数据:token
在App.vue里面
ts
window.addEventListener('message', (event) => {
const { data } = event;
// 只接受信任源列表发来的数据
saveToken(data.token);
localStorage.setItem('currentNavPoi', data.systemName);
});
注意:
使用iframe时, 请关闭浏览器上的 vue、react的开发中工具, 例如 dev-tools, 不然window.addEventListener获取不到传递过来的值
使用iframe时, 请关闭浏览器上的 vue、react的开发中工具, 例如 dev-tools, 不然window.addEventListener获取不到传递过来的值
使用iframe时, 请关闭浏览器上的 vue、react的开发中工具, 例如 dev-tools, 不然window.addEventListener获取不到传递过来的值