首页 前端知识 iframe嵌入页面实现免登录思路(以vue为例)

iframe嵌入页面实现免登录思路(以vue为例)

2024-06-07 00:06:27 前端知识 前端哥 309 895 我要收藏

背景:

最近实现一个功能需要使用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}` //  

注意:

  • 如果使用这个方法最好把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的执行流程有关就不多说了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11155.html
标签
评论
发布的文章

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!