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

糕冷小美n

已于 2024-09-27 16:10:26 修改

阅读量418

点赞数 4

文章标签： vue.js 前端 javascript

于 2024-09-27 15:27:45 首次发布

本文链接：https://blog.csdn.net/m0_65360496/article/details/142356647

版权

一、请求一个加密地址获取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%'不生效值有改变待改进