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

简介:实现一个功能需要使用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的执行流程有关就不多说了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/810656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网安播报】GitHub上的恶意Visual Studio 项目推送 Keyzetsu 恶意软件

1、GitHub 上的恶意 Visual Studio 项目推送 Keyzetsu 恶意软件 威胁行为者正在滥用 GitHub 自动化功能和恶意 Visual Studio 项目来推送“Keyzetsu”恶意软件的新变种并窃取加密货币付款。攻击者创建了GitHub 存储库&#xff0c;并使用各种方法来人为地提高其在平台上的受欢迎…

idea 卡怎么办

设置内存大小 清缓存重启 idea显示内存全用情况 右下角

Array、Object、String、Number、Math常用方法

一、Array方法 方法参数返回值描述以下Api会修改原属组pushitem1, item2, ...数组新长度向数组的末尾添加一个或多个元素&#xff0c;并返回新的长度pop删除的元素删除数组的最后一个元素&#xff0c;并返回删除的元素unshiftitem1,item2, ...数组新长度向数组的开头添加一个或…

Scala实战:打印九九表

本次实战的目标是使用不同的方法实现打印九九表的功能。我们将通过四种不同的方法来实现这个目标&#xff0c;并在day02子包中创建相应的对象。 方法一&#xff1a;双重循环 我们将使用双重循环来实现九九表的打印。在NineNineTable01对象中&#xff0c;我们使用两个嵌套的fo…

Cache的替换策略LRU和一致性协议

LRU&#xff08;Least Recently Used&#xff09;替换策略和一致性协议是计算机内存管理中至关重要的组成部分&#xff0c;它们对于确保缓存性能和数据一致性起到了关键作用。下面将详细介绍LRU替换策略和一致性协议的工作原理、应用场景以及相关的设计考量。 LRU替换策略 LR…

2024年天津专升本成绩查询、分数复核的重要通知

2024年天津高职升本科考试考生&#xff1a;事关成绩查询查询、分数复核和&#xff0c;重要事项早知道 一、成绩查询 2024年天津市高职升本科文化课考试的评卷及成绩合成工作已于日前结束&#xff0c;自4月12日14时起&#xff0c;考生可通过以下方式查询考试成绩。1&#xff0…

代码随想录 Day18 字符串 | LC151 反转字符串中的单词 卡码网55 右旋字符串

四、反转字符串中的单词 题目&#xff1a; 力扣151&#xff1a;反转字符串中的单词 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单…

Java基础第十课——类与对象(1)

前面二白的九讲属于Java基础方面的内容&#xff0c;总体来说偏基础和简单&#xff0c;能完成的操作也有限&#xff0c;有兴趣的同学可以写一写相关的管理系统&#xff0c;后面二白也会上传一些自己敲的小系统&#xff0c;下面就要开始Java面对对象的知识内容了&#xff0c;从这…

String类(2)

❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&…

应用程序无法正常启动0xc000007b, 解决方案(超简单)

1、问题 安装软件时候报错 应用程序无法正常启动(0xc000007b) 2、原因 主要是没有安装Microsoft Visual C 3、解决方法&#xff1a;下载 Microsoft Visual C 可再发行程序包 直接在Microsoft Learn官网下载 vcredist_x64.exe。 3.1、打开官网链接Microsoft Visual C 可再发…

OJ系统JavaScript Node标准输入输出(https://pintia.cn/)

const readline require("readline"); const rl readline.createInterface({input: process.stdin,output: process.stdout, }); const arr [];//储存数据 rl.on(line, function (line) {arr.push(line);} ); rl.on(close,function (){console.log(arr)//[ 1 5, 1…

小程序解析二维码:jsQR

1.了解jsQR jsQR是一个纯javascript脚本实现的二维码识别库&#xff0c;不仅可以在浏览器端使用&#xff0c;而且支持后端node.js环境。jsQR使用较为简单&#xff0c;有着不错的识别率。 2.效果图 3.二维码 4.下载jsqr包 npm i -d jsqr5.代码 <!-- index.wxml --> &l…

blender安装mmd并导入pmx,pmd文件

点击链接GitHub上下载这个&#xff0c;值得注意的是blender4.0以上版本暂时不支持&#xff0c;这里使用的是blender3.6版本GitHub - powroupi/blender_mmd_tools: mmd_tools is a blender addon for importing Models and Motions of MikuMikuDance. 复制当前内容 粘贴到当前…

如何了解数字化和信息化的区别?

在数字化浪潮席卷全球的今天&#xff0c;企业如何乘风破浪、实现转型升级&#xff1f; 数字化和信息化&#xff0c;这两个看似相似却各有千秋的概念&#xff0c;一直被人们拿来对比。 下面就来讲一讲我的理解&#xff1a; 从简单了说&#xff1a; “信息化”可以理解为传统数…

关于配置nginx的反向代理时出现的一些问题及解决方法

1.配置反向代理 &#xff08;1&#xff09;上传nginx.conf到/opt/nginx/conf/中&#xff0c;并覆盖。 #查看一下IP是否正确&#xff08;需要将文件中的IP改成自己的IP&#xff09; cat /opt/nginx/conf/nginx.conf &#xff08;2&#xff09;重启 cd /opt/nginx/sbin ./n…

Java二进制、八进制、十进制、十六进制转换

N进制转十进制 Integer.valueOf( str, N ) 方法把N进制的字符str转换成十进制 Integer.valueOf( str, N ) 方法等同于 Integer.parseInt( str, N ) 方法 // str 是字符串 // N 整数&#xff0c;指定字符串str是几&#xff08;N&#xff09;进制 Integer.parseInt(str, N) 例…

docker安装华为高斯-opengauss

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…

每周编辑精选|COIG-CQIA 数据集上线、在线运行 ComfyUI 文生图工作流

为了填补高质量中文数据集的空白&#xff0c;中国科学院、零一万物、北京大学等 10 家机构联合开发出了 COIG-CQIA 数据集。令人惊讶的是&#xff0c;该数据集中「弱智贴吧」的数据质量&#xff0c;居然大幅度超过知乎、豆瓣、思否等知识社区。 COIG-CQIA 数据集现已上线 hyper…

为何进口的主食冻干大量养猫达人推荐?五大优质主食冻干养猫必选

不少新手养猫人都会好奇&#xff0c;为何进口主食冻干的价格如此高昂&#xff0c;却仍受到众多养猫达人的青睐&#xff1f;与国产主食冻干相比&#xff0c;进口产品价格高出3-4倍&#xff0c;那么这高昂的价格背后&#xff0c;进口主食冻干究竟物有所值&#xff0c;还是只是一个…

web安全-SSH私钥泄露

发现主机 netdiscover -r 192.168.164.0 扫描端口 看到开放80和31337端口都为http服务 浏览器访问测试 查看80端口和31337端口网页和源代码并无发现有用信息 目录扫描 扫描出80端口并无有用信息 扫描31337端口 发现敏感文件robots.txt和目录.ssh 访问敏感文件和目录 /.ss…