当前位置: 首页 > news >正文

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的执行流程有关就不多说了。

相关文章:

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

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

详解TCP/IP五层模型

目录 一、什么是TCP五层模型&#xff1f; 二、TCP五层模型的详细内容 1. 应用层 2. 传输层 3. 网络层 4. 数据链路层 5. 物理层 三、网络设备所在分层 封装和分⽤ 三、Java示例 引言&#xff1a; 在网络通信中&#xff0c;TCP/IP协议是至关重要的。为了更好地理解TCP协议的工…...

开创加密资产新纪元:深度解析ERC-314协议

随着加密资产市场的不断发展和区块链技术的日益成熟&#xff0c;新的协议和标准不断涌现&#xff0c;其中包括了ERC-314协议。本文将深入分析ERC-314协议的特点、功能以及对加密资产市场可能产生的影响。 1. ERC-314协议简介 ERC-314协议是一项建立在以太坊区块链上的新提案&a…...

Rust 实战练习 - 9. 文本编码,URL编码,加密解密

编解码 编程工作中&#xff0c;很复杂的一个环节的就是编解码和多语言。这里只讨论编解码的工作。 目标&#xff1a; 常见文本编码的转换&#xff08;GBK, Shift-JIS, UTF8, Unicode, ASCII)Web中常用的编码常见的加密算法(md5, sha1, HMAC, AES/DES, RSA) encoding/decodi…...

linux环境openfile限制

/etc/security/limits.conf 是 Linux 系统中用于设置用户资源限制的配置文件。这个文件允许系统管理员为每个用户或用户组设置各种资源限制&#xff0c;以防止用户滥用系统资源。 这个文件中的每一行都定义了一个资源限制。每一行通常包含以下字段&#xff08;由空格或冒号分隔…...

python之pandas数据导入和导出

目录 Pandas 常用数据导入Pandas 常用数据导出数据导入示例CSV 文件&#xff1a;指定导入文件的编码格式添加列标题 Excel 文件&#xff1a;JSON 文件&#xff1a;数据库&#xff1a;HTML 表格&#xff1a;Clipboard&#xff1a;HDF5 文件&#xff1a;Feather 文件&#xff1a;…...

Docker 集成 redis,并在nacos进行配置时需要注意点

安装redis镜像 docker pull redis:6.0.6redis配置文件 创建相关配置文件 mkdir /apps/redis cd /apps/redis touch redis.conf vim redis.confredis.conf内容&#xff1a; #开启保护 protected-mode yes #开启远程连接 bind 0.0.0.0 #自定义密码 port 6379 timeout 0 # 900s内…...

数据库系统工程师考试大纲

数据库系统工程师考试大纲主要包括以下几个方面的考试要求&#xff1a; 1.掌握计算机体系结构以及各主要部件的性能和基本工作原理。 2.掌握操作系统、程序设计语言的基础知识&#xff0c;了解编译程序的基本概念。 3.熟练掌握常用数据结构和常用算法。 4.熟悉软件工程和软件开…...

(Java)数据结构——图(第七节)Folyd实现多源最短路径

前言 本博客是博主用于复习数据结构以及算法的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 Folyd实现原理 中心点的概念 感觉像是充当一个桥梁的作用 还是这个图 我们常在一些讲解视频中看到&#xff0c;就比如dist&#xff08;-1&#xff09;&#xff0…...

使用Python进行高效的多线程HTTP请求

在处理网络请求时&#xff0c;尤其是当需要大量请求相同或不同的URL时&#xff0c;采用多线程的方式可以显著提高效率。本文介绍了如何使用Python的concurrent.futures模块实现多线程HTTP请求。 为什么使用多线程&#xff1f; 多线程可以让CPU和网络资源得到更有效的利用。在…...

如何利用OceanBase v4.2的 外部表简化外部数据处理

为什么需要使用外表 在日常的业务场景中&#xff0c;经常遇到需要在数据库中处理外部数据的情况&#xff0c;这些数据可能来源于应用程序&#xff0c;或者是其他业务系统。一般来说&#xff0c;常是通过ETL工具将外部数据库的数据导入到数据库内部的表中&#xff0c;再进行分析…...

【灵境矩阵】零代码创建AI智能体之行业词句助手

欢迎来到《小5讲堂》 这是《灵境矩阵》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 创建智能体选择创建方式零代码 基础配置头像名称简介指令开场白…...

springboot 防抖操作

大佬的代码&#xff1a;看这里 原理&#xff1a; 通过aop切面编程&#xff0c;在调用接口前缓存接口信息&#xff0c;将信息缓存到redis中&#xff0c;在规定时间内重复调用接口&#xff0c;会被拦截请求 有个地方感觉不太合理&#xff0c;在使用中我将其修改了 //前略 publi…...

Playwright录制脚本 —— web自动化测试!

简介&#xff1a; 在编写 web 自动化测试用例时&#xff0c;代码编写的速度是否快&#xff0c;会影响框架的使用体验。现在很多的框架都会提供一些辅助功能&#xff0c;帮助我们更快的去编写自动化测试代码&#xff0c;而录制功能是几乎所有的web自动化工具都会带的功能。在实际…...

什么是工业级物联网智能网关?如何远程控制PLC?

在数字化浪潮席卷全球的今天&#xff0c;工业物联网&#xff08;IIoT&#xff09;已经成为推动工业转型升级的关键力量。而在工业物联网的大家庭中&#xff0c;工业级物联网智能网关扮演着举足轻重的角色。那么&#xff0c;究竟什么是工业级物联网智能网关&#xff1f;又该如何…...

AI推介-大语言模型LLMs论文速览(arXiv方向):2024.04.05-2024.04.10

文章目录~ 1.Learn from Failure: Fine-Tuning LLMs with Trial-and-Error Data for Intuitionistic Propositional Logic Proving2.Continuous Language Model Interpolation for Dynamic and Controllable Text Generation3.Event Grounded Criminal Court View Generation w…...

javascript:call()、apply()、bind()的区别和使用

javascript&#xff1a;call()、apply()、bind()的区别和使用 1 前言 记录javascript的call、apply、bind方法绑定this的区别以及使用。 call、apply、bind的区别&#xff1a; 【相同点】&#xff1a;作用相同&#xff0c;都是动态修改this指向&#xff1b;都不会修改原先函…...

ubuntu系统安装systemc-2.3.4流程

背景&#xff1a;systemC编程在linux下的基础环境配置 1&#xff0c;下载安装包&#xff0c;并解压 &#xff08;先下载了最新的3.0.0&#xff0c;安装时候显示sc_cmnhdr.h:115:5: error: #error **** SystemC requires a C compiler version of at least C17 **** &#xff…...

Java开发中的entity、vo和pojo

Java开发中的entity、vo和pojo 1.Entity实体2.vo3.pojo 1.Entity实体 定义&#xff1a; Entity 通常指的是与数据库表对应的对象。它包含了与数据库表字段相对应的属性和一些业务逻辑方法。Entity 通常用于数据的持久化操作&#xff0c;如增删改查。使用场景&#xff1a; 当需…...

通过IPV6+DDNS实现路由器远程管理和Win远程桌面控制

前期需要的准备&#xff1a; 软路由&#xff0c;什么系统都可以&#xff0c;要支持IPV6&#xff0c;能够自动添加解析 光猫的管理员账号&#xff0c;能够进入光猫修改配置&#xff0c;拨号上网账号 域名账号和DNS服务 主要步骤&#xff1a; 利用管理员账号&#xff0c;进入…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...