贵阳网站开发培训学费,高校专业建设主要内容,域名服务网站,网站连接到wordpress简介#xff1a;实现一个功能需要使用iframe嵌入其它系统内部的一个页面#xff0c;但嵌入后出现一个问题#xff0c;就是一打开这个页面就会自动跳转到登录页#xff0c;原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的#xff0c;本文就是解决这个问题的。 …简介实现一个功能需要使用iframe嵌入其它系统内部的一个页面但嵌入后出现一个问题就是一打开这个页面就会自动跳转到登录页原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的本文就是解决这个问题的。
解决技术方案本地系统使用iframe嵌入某个系统内部页面那就证明被嵌入系统是安全的可使用的所以可以通过通讯方式带一个token过去实现免登录我用vue项目作为例子具体如下
方法一通过url传
// 发送方本地系统
diviframe :srcurl idchildFrame importancehigh namedemo /iframe
/div//被嵌入页面进行接收
url http://localhost:8080/dudu?mytoken{mytoken} // 接收方直接使用window.location.search接收然后对接收到的进行处理
注意
如果使用这个方法最好把token加密一下要不然直接显示在url是非常危险的行为所以我更推荐下面方法二上面接收方要在在APP.vue文件的created生命周期接收在嵌入页面接收是不行的这里与Vue的执行流程有关就不多说了
方法二通过iframe的通讯方式传值的推荐
// 发送方本地系统var params {type: setToken,token: 这是传过去的token
}
window.parent.postMessage(params, *);// 接收方被嵌入系统在APP.vue文件的created生命周期接收
window.addEventListener( message,(e){if(e.data.type setToken){//这里拿到token,然后放入缓存实在免登录即可}}
false); 注意注意 上面接收方要在在APP.vue文件的created生命周期接收在嵌入页面接收是不行的这里与Vue的执行流程有关就不多说了。
