Vue前端嵌套系统实现在iframe框架中传值给子系统实现单点登录或其他操作
最近做到的项目里遇到了这样一个问题:由于不同的组件写在了不同的项目中,需要引用的时候一般是通过iframe框架直接在父系统中引用已经上传好了的网址,通过iframe进行操作。当iframe中只有浏览等无关用户、用户权限时,直接引用框架是没有影响的,但是如果要对用户进行区分,则还需要将父系统的登录用户信息传递给子系统使用。
综上需要实现的效果就是取消子系统的登陆跳转,将token或其他值传入子系统中,使得在iframe加载后自动登录了父系统的账号。在实现的过程中试过如下几种方式都较为简单的能够使iframe嵌套内容和父系统传递信息。
1.通过url携带”不重要”或者’token’的信息传递给子页面
在A系统中传递token/params信息:
iframeUrl() {
let token= “*******”;
return `${window.iframeUrl}/#/网页url/${token}`
}
B系统中接受token/params信息:
可以在单页面使用:
if (this.$route.query.token) {
setToken(token) //将token值按照子系统保存下来
}
也可以在路由守卫,router.beforeEach()函数添加
{
setToken(token) //将token值按照子系统保存下来
window.location.href = window.location.origin
}
2.通过postMessage/addEventListener传递信息
在嵌入子系统的父页面中设置传送信息的代码
const iframe = document.querySelector("#iframe"); //首先获取到需要发送信息的框架
const iframeWindow = iframe.contentWindow; //传递保存在父框架中的信息
const token = localStorage.getItem("token");
const userId = localStorage.getItem("userId");
const userName = localStorage.getItem("userName"); //当框架加载时,传送信息到框架中 iframe.onload = () => {
iframeWindow.postMessage({ token: token, userId: userId, userName: userName }, "http://localhost:9000/网页路由");
//postMessage的第一个参数是传递的信息,第二个参数是接收信息的地址,也可以设置为*则所有嵌入该页面的iframe都能接收到信息
};
在子页面中设置接收信息的代码,在created或mounted里调用方法接收信息
window.addEventListener("message", (event) => {
if (event.data.token) {
//将数据存储到子系统的localStorage中
localStorage.setItem("token", event.data.token);
localStorage.setItem("userId", event.data.userId);
localStorage.setItem("userName", event.data.userName);
//使用传递的信息
this.param.createUser = event.data.userId;
}
});
同理,如果我要在子页面发送消息给父页面进行操作,操作当如下
parentUpcd() {
this.reback = true;
let params = { fromImport: this.fromImport, reback: this.reback };
// 发送信息给父页面,父页面返回至上一页
window.parent.postMessage(params, "*");
},
父页面中mounted接受子页面传递信息
window.addEventListener("message", (e) => {
this.reback = e.data.reback;
this.fromImport = e.data.fromImport;
});
3.父域Cookie(该方法需要应用系统的域名建立在一个共同的主域名下)
Cookie 的作用域由 domain 属性和 path 属性共同决定.domain 属性的有效值为当前域或其父域的域名/IP地址,path 属性的有效值是以“/”开头的路径.
当将 Cookie 的 domain 属性设置为当前域的父域,就认为它是父域 Cookie,即父域中的 Cookie 子域能共享,所以子域会自动继承父域中的Cookie.
所以我们只需要将 Cookie 的 domain 属性设置为父域的域名(主域名),同时将 Cookie 的 path 属性设置为根路径,这样所有的子域应用就都可以访问到这个 Cookie 了.