18. 适配 HTTP、SQL 数据查询

src/api/axios.ts

@@ -29,7 +29,7 @@ axiosInstance.interceptors.request.use(
     const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
     config.headers = {
       ...config.headers,
-      'tenant-id': info ? info[SystemStoreEnum.TENANT_INFO]['tenantId'] : ''
+      'tenant-id': info ? info[SystemStoreEnum.TENANT_INFO]['tenantId'] : undefined
     }
 
     // 白名单校验

src/api/http.ts

@@ -8,6 +8,9 @@ import {
   RequestParamsObjType
 } from '@/enums/httpEnum'
 import type { RequestGlobalConfigType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { getLocalStorage } from "@/utils";
+import { StorageEnum } from "@/enums/storageEnum";
+import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
 
 export const get = <T = any>(url: string, params?: object) => {
   return axiosInstance<T>({
@@ -107,6 +110,27 @@ export const translateStr = (target: string | Record<any, any>) => {
   return target
 }
 
+// 处理 token 和多租户的头；注意：只拼接属于 VITE_DEV_PATH 或 VITE_PROD_PATH 开头的 URL 地址，就是自己的后端
+export const appendTokenAndTenant = (headers: RequestParamsObjType, requestUrl: string) => {
+  if (requestUrl.indexOf(import.meta.env.VITE_DEV_PATH) === -1
+    || requestUrl.indexOf(import.meta.env.VITE_PROD_PATH) === -1) {
+    return headers
+  }
+  const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
+  if (!info) {
+    return headers;
+  }
+  // ① 获取 tenantId
+  headers['tenant-id'] = info[SystemStoreEnum.TENANT_INFO]['tenantId']
+  // ② 获取 token
+  const userInfo = info[SystemStoreEnum.USER_INFO]
+  if (!userInfo) {
+    return headers
+  }
+  headers[userInfo[SystemStoreUserInfoEnum.TOKEN_NAME] || 'token'] = 'Bearer ' + userInfo[SystemStoreUserInfoEnum.USER_TOKEN]
+  return headers
+}
+
 /**
  * * 自定义请求
  * @param targetParams 当前组件参数
@@ -155,6 +179,8 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
     ...targetRequestParams.Header
   }
   headers = translateStr(headers)
+  // 处理 token 和多租户的头
+  headers = appendTokenAndTenant(headers, requestUrl)
 
   // data 参数
   let data: RequestParamsObjType | FormData | string = {}

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue

@@ -7,10 +7,11 @@
       </n-tabs>
     </div>
     <div v-show="requestContentType === RequestContentTypeEnum.DEFAULT">
+      <n-tag type="warning">需要后台提供对应的 http 的接口</n-tag> <br />
+      例如说：http://127.0.0.1:48080/admin-api/report/go-view/data/get-by-http
       <n-tabs type="line" animated v-model:value="tabValue">
         <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
       </n-tabs>
-
       <!-- 各个页面 -->
       <div class="go-mt-3">
         <div v-if="tabValue !== RequestParamsTypeEnum.BODY">
@@ -73,12 +74,13 @@
         <n-text>SQL 类型不支持 Get 请求，请使用其它方式</n-text>
       </template>
       <template v-else>
-        <n-tag type="warning">需要后台提供专门处理 sql 的接口</n-tag>
+        <n-tag type="warning">需要后台提供专门处理 sql 的接口</n-tag> <br />
+        例如说：http://127.0.0.1:48080/admin-api/report/go-view/data/get-by-sql
         <setting-item-box name="键名">
           <n-tag type="primary" :bordered="false" style="width: 40px; font-size: 16px"> sql </n-tag>
         </setting-item-box>
         <setting-item-box name="键值">
-          <monaco-editor v-model:modelValue="requestSQLContent['sql']" width="600px" height="200px" language="sql" />
+          <monaco-editor v-model:modelValue="requestSQLContent['sql']" width="600px" height="190px" language="sql" />
         </setting-item-box>
       </template>
     </div>