iframe嵌入Vue页面实现免登方法

CodeCrusader_wanqing

已于 2024-04-11 09:37:59 修改

阅读量2.3k

点赞数 26

文章标签：前端 vue.js

于 2024-04-11 08:52:24 首次发布

本文链接：https://blog.csdn.net/xiaod00000000000/article/details/137623212

版权

文章介绍了如何在Vue项目中使用iframe嵌入其他系统页面时避免自动跳转到登录页的问题。提出了两种方法：一是通过URL参数传递加密的token，二是利用iframe的postMessage功能在APP.vue的created生命周期内接收并存储token。强调了对敏感信息进行加密的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：实现一个功能需要使用iframe嵌入其它系统内部的一个页面，但嵌入后出现一个问题，就是一打开这个页面就会自动跳转到登录页，原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的，本文就是解决这个问题的。

解决技术方案：本地系统使用iframe嵌入某个系统内部页面，那就证明被嵌入系统是安全的可使用的，所以可以通过通讯方式带一个token过去实现免登录，我用vue项目作为例子具体如下：

方法一通过url传：

// 发送方（本地系统）：
<div>
    <iframe :src="url" id="childFrame" importance="high" name="demo" ></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的执行流程有关就不多说了。