vue单点登录异步执行请求https://xxx.com获取并处理数据

news2024/9/28 12:36:50

一、请求一个加密地址获取access_token再拼接字符串再次请求

接口返回数据

异步执行请求该地址获取数据并处理

二、请求代码第二步使用 access_token 获取 auth_key

// 第二步:使用 access_token 获取 auth_key
        const access_token = tokenData.access_token;
        const authKeyResponse = await fetch(`https://xxxx.com:8888/v2/user/authkey?access_token=${access_token}&account=xcykadmin`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        });

        if (!authKeyResponse.ok) {
          throw new Error(`HTTP error! status: ${authKeyResponse.status}`);
        }
        const authKeyData = await authKeyResponse.json();
        console.log('获取到的auth_key:', authKeyData);

三、拼成finalUrl在弹框中打开单点页面

<j-modal :footer="null" title="" :width="modelStyle.width" :height="modelStyle.fullScreen ? '100%' : '590px'"
      :visible="isChatBoxOpen" :bodyStyle="bodyStyle" switchFullscreen @cancel="closeChatBox"
      @update:fullscreen="isFullscreen">
      <iframe id="" :src="finalUrl" frameborder="0" width="100%" :height="modelStyle.fullscreen ? '100%' : '98%'"
        scrolling="auto" style="background-color: #fff;"></iframe>
    </j-modal>

注:iframe似乎不支持放大动态高度:height="modelStyle.fullscreen ? '100%' : '98%'不生效值有改变待改进

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

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

相关文章

什么是NAND Flash?

什么是NAND Flash? NAND闪存是一种非易失性存储器技术&#xff0c;它彻底改变了数字时代的数据存储。它是闪存的一种形式&#xff0c;这意味着它可以被电擦除和重新编程。NAND闪存以NAND&#xff08;NOT-AND&#xff09;逻辑门命名&#xff0c;该逻辑门用于其基本架构。术语“…

服务运营 | 竞价风暴:在线广告交易的实时拍卖与定价艺术

编者按&#xff1a; 在广告交易领域&#xff0c;尤其是谷歌等平台的广告交易中&#xff0c;每一次广告展示——即向特定浏览者展示广告的机会——都是由出版商&#xff08;publisher&#xff09;&#xff0c;例如《纽约时报》网站&#xff0c;通过实时拍卖的方式出售给广告商。…

中航通用飞机社招入职笔试:SHL题库综合能力性格问卷题型分析、高分攻略

中航通用飞机有限责任公司是中国航空工业集团有限公司旗下的大型国有企业&#xff0c;专注于通用航空产品的研制、通航运营与服务、航空零部件制造等业务。公司注册资本133.66亿元人民币&#xff0c;总资产约667亿元&#xff0c;员工人数超过16000人。产品线丰富&#xff0c;包…

8.使用 VSCode 过程中的英语积累 - Help 菜单(每一次重点积累 5 个单词)

前言 学习可以不局限于传统的书籍和课堂&#xff0c;各种生活的元素也都可以做为我们的学习对象&#xff0c;本文将利用 VSCode 页面上的各种英文元素来做英语的积累&#xff0c;如此做有 3 大利 这些软件在我们工作中是时时刻刻接触的&#xff0c;借此做英语积累再合适不过&a…

C# 用Timer控件简单写一个倒计时60s功能

先放界面上一个Label和一个Timer控件&#xff0c;Label用来展示倒计时秒数 添加事件 设置属性&#xff0c;设置每隔一秒执行一次 放代码&#xff1a; //设置时间控件开始运行&#xff0c;具体放在哪里看具体需求 this.timer1.Start();//定义一个全局变量表示秒数 int time…

【手机直连卫星】除了华为Mate 60 Pro,支持卫星通信的手机还有哪些款

2023年底&#xff0c;华为推出的Mate 60 Pro手机&#xff0c;开创了智能手机卫星通信的新纪元。它支持卫星电话通话和短信功能&#xff0c;让用户即使在偏远山野或深海之上也能保持与外界的联系。这一技术的加入&#xff0c;无疑为户外探险者和遥远地区的工作者提供了难以估量的…

影院管理革新:小徐的Spring Boot应用

第二章开发技术介绍 2.1相关技术 小徐影城管理系统是在Java MySQL开发环境的基础上开发的。Java是一种服务器端脚本语言&#xff0c;易于学习&#xff0c;实用且面向用户。全球超过35&#xff05;的Java驱动的互联网站点使用Java。MySQL是一个数据库管理系统&#xff0c;因为它…

港科夜闻 | 香港科大颁授荣誉大学院士予五位杰出人士

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大颁授荣誉大学院士予五位杰出人士。香港科大9月24日向五位杰出人士颁授荣誉大学院士&#xff0c;他们分别为包弼德教授、简吴秋玉女士、高秉强教授、吴永顺先生及容永祺博士(按姓氏英文字母排序)。荣誉大学院士颁…

数据结构——对顺序线性表的操作

大家好啊&#xff0c;今天给大家分享一下对于顺序线性表的相关操作&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦…

一步步带你Linux内核编译与安装

Linux内核编译与安装 安装流程 #mermaid-svg-0PfY2uowOUJaN2Ov {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0PfY2uowOUJaN2Ov .error-icon{fill:#552222;}#mermaid-svg-0PfY2uowOUJaN2Ov .error-text{fill:#5522…

高级算法设计与分析 学习笔记7 数据结构扩充

OS tree 数据统计树 本体是红黑树&#xff0c;除了自己的数字外还要记录自己这颗子树有几个节点。 这种特性可以让使用者迅速找到自己要找的第i个数。 往左走&#xff0c;给的那个数字就是排名&#xff0c;但是往右边走的话&#xff0c;那就的先加上当前的排名&#xff08;也就…

宠物空气净化器希喂和352哪个好用?两大爆火机型哪款吸毛、除臭效果比较好?

猫毛、狗毛、鹦鹉毛&#xff0c;总之只要家里养着有带毛的宠物&#xff0c;毛就会出现在各种地方&#xff0c;床上、沙发上、衣服上、水杯里...根本躲不开。而且&#xff0c;除了肉眼可见的&#xff0c;呼吸时、说话时&#xff0c;不经意间还会吃到毛毛。这些毛毛飘在空气里时&…

数据结构-3.4.队列的基本概念

一.队列的定义&#xff1a; 1.图解&#xff1a; 2.重要术语&#xff1a; 空队列&#xff1a;队列中不含任何元素。 二.队列的基本操作&#xff1a; 三.总结&#xff1a;

气膜仓库:高效便捷的物流解决方案—轻空间

在现代物流行业中&#xff0c;效率与灵活性是关键。气膜仓库作为一种创新的仓储方式&#xff0c;凭借其独特的优势&#xff0c;正迅速成为物流企业的理想选择。 轻量化与快速搭建 气膜仓库的最大特点在于其轻量化结构。这种仓库由特制的气膜材料构成&#xff0c;能够在较短的时…

微服务JSR303解析部署使用全流程

目录 1、什么是JSR303校验 2、小试牛刀 【2.1】添加依赖 【2.2】添加application.yml配置文件修改端口 【2.3】创建实体类User 【2.4】创建控制器 【2.5】创建启动类 【注意】不必创建前端页面 3、规范返回值格式&#xff1a; 3.1添加ResultCode工具类 3.2添加Resul…

排序(插入,希尔,堆排,冒泡)

常见的排序算法&#xff1a; 插入排序&#xff1a; 直接插入排序&#xff1a;是一种简单的插入排序法&#xff0c;其基本思想是&#xff1a;把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个…

24 Vue3之集成TailwindCSS

Tailwind CSS Tailwind CSS是一个由js编写的CSS 框架 他是基于postCss 去解析的 官网地址Tailwind CSS 中文文档 - Tailwind CSS - 只需书写 HTML 代码&#xff0c;无需书写 CSS&#xff0c;即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网 对于PostCSS…

SigLIP技术小结

paperhttps://arxiv.org/abs/2303.15343githubhttps://github.com/google-research/big_vision个人博客位置http://myhz0606.com/article/siglip 1 背景 CLIP[1]自提出以来在zero-shot分类、跨模态搜索、多模态对齐等多个领域得到广泛应用。得益于其令人惊叹的能力&#xff0…

普通人如何搭乘 AI 快车,开辟 10 大赚钱新赛道

亲爱的朋友们&#xff0c;准备好了吗&#xff1f;让我们一同踏上这趟激动人心的AI淘金之旅&#xff01; 俗话说得好&#xff0c;“机不可失&#xff0c;时不再来”。如今&#xff0c;AI这列高速列车正呼啸而过&#xff0c;而我们每个人&#xff0c;都有机会成为车上的幸运儿。…