自定义接口

.env.development

@@ -29,3 +29,6 @@ VITE_SOURCEMAP=false
 
 # 输出路径
 VITE_OUT_DIR=dist
+
+# 自定义接口路径
+VITE_INTERFACE_URL='http://localhost:12080/magic/web/index.html'

src/components/iFrame/src/IFrame.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
+import { getAccessToken, getTenantId } from '@/utils/auth'
 
 defineOptions({ name: 'IFrame' })
 
@@ -13,7 +14,33 @@ const init = () => {
   height.value = document.documentElement.clientHeight - 94.5 + 'px'
   loading.value = false
 }
+console.log(props.src);
+
+function populateIframe(iframe, headers) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", props.src);
+  xhr.responseType = "blob";
+  headers.forEach((header) => {
+    xhr.setRequestHeader(header[0], header[1]);
+  });
+  // xhr.onreadystatechange = () => {
+  //   if (xhr.readyState === xhr.DONE) {
+      
+  //     if (xhr.status === 200) {
+  //       iframe.src = URL.createObjectURL(xhr.response);
+  //     }
+  //   }
+  // };
+  xhr.send();
+}
+
+
 onMounted(() => {
+  
+  setTimeout(() => {
+    var iframe = document.querySelector("#iframe");
+    populateIframe(iframe, [["Authorization", 'Bearer ' +  getAccessToken()], ["tenant-id", getTenantId()]]);
+  }, 300);
   setTimeout(() => {
     init()
   }, 300)
@@ -21,12 +48,21 @@ onMounted(() => {
 </script>
 <template>
   <div v-loading="loading" :style="'height:' + height">
-    <iframe
+    <!-- <iframe
       ref="frameRef"
       :src="props.src"
       frameborder="no"
       scrolling="auto"
       style="width: 100%; height: 100%"
-    ></iframe>
+      id="iframe"
+    ></iframe> -->
+    <iframe
+        ref="frameRef"
+        frameborder="no"
+        scrolling="auto"
+        style="width: 100%; height: 100%"
+        id="iframe"
+        :src="props.src"
+      ></iframe>
   </div>
 </template>

src/views/infra/customInterface/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <ContentWrap>
+    <IFrame :src="src" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup name="CustomInterface">
+// import { getAccessToken, getTenantId } from '@/utils/auth'
+const src = import.meta.env.VITE_INTERFACE_URL
+
+// window.MAGIC_EDITOR_CONFIG = {
+//   request: {
+//     beforeSend: function (config) {
+//       // 如果是基于Cookie验证的，此处可以不配。
+//       config.headers.token = getAccessToken() // 此处自行获取Token
+//       return config;
+//     }
+//   },
+//   getMagicTokenValue: function () {
+//     var token = getAccessToken(); // 此处自行获取token 
+//     return token;
+//   }
+// }
+</script>

src/views/report/goview/index.vue

@@ -6,5 +6,5 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GoView' })
 
-const src = 'http://localhost:3000'
+const src = 'http://127.0.0.1:3000'
 </script>