feat(api): support x-greptime-auth HTTP header

src/App.vue

@@ -38,12 +38,13 @@
 
   if (import.meta.env.MODE === 'development' || import.meta.env.MODE === 'production') {
     // Assuming local greptimeDB is up and running
-    const { username, password, database, host }: any = useStorage('config', {}).value
+    const { username, password, database, host, authHeader }: any = useStorage('config', {}).value
     updateSettings({
       username,
       password,
       database,
       host,
+      authHeader,
     })
   }
 </script>

src/api/interceptor.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 import JSONbigint from 'json-bigint'
 
 import type { AxiosRequestConfig, AxiosResponse } from 'axios'
-import { Message, Modal } from '@arco-design/web-vue'
+import { Message } from '@arco-design/web-vue'
 import { RecordsType } from '@/store/modules/code-run/types'
 
 export interface OutputType {
@@ -47,7 +47,11 @@ axios.interceptors.request.use(
 
     if (appStore.username || appStore.password) {
       const basicAuth = `Basic ${btoa(`${appStore.username}:${appStore.password}`)}`
-      config.headers.authorization = basicAuth
+      if (!appStore.authHeader || appStore.authHeader === 'Authorization') {
+        config.headers.authorization = basicAuth
+      } else {
+        config.headers[appStore.authHeader] = basicAuth
+      }
     }
 
     if (isV1) {

src/assets/style/select.less

@@ -2,7 +2,7 @@
   padding-right: 8px;
   padding-left: 8px;
   background: var(--grey-bg-color);
-  // border-radius: 4px;
+  border-radius: 4px;
 }
 
 .arco-select-view-single:hover {

src/components/global-setting/index.vue

@@ -28,6 +28,16 @@ a-drawer.settings-drawer(
       a-input(v-model="settingsForm.username")
     a-form-item(:label="$t('settings.password')")
       a-input-password(v-model="settingsForm.password" autocomplete="off")
+    a-form-item(v-if="settingsForm.username || settingsForm.password")
+      template(#label)
+        a-space(:size="4")
+          span {{ $t('settings.authHeader') }}
+          a-tooltip(mini position="tl" :content="$t('settings.authHeaderTip')")
+            svg.icon-12
+              use(href="#question")
+      a-select(v-model="settingsForm.authHeader")
+        a-option(value="Authorization") Authorization(default)
+        a-option(value="x-greptime-auth") x-greptime-auth
     a-form-item
       template(#label)
         a-space(:size="4")
@@ -70,7 +80,9 @@ a-drawer.settings-drawer(
   const { checkTables, getScriptsTable } = useDataBaseStore()
 
   const { role } = storeToRefs(useUserStore())
-  const { globalSettings, host, database, username, password, databaseList, userTimezone } = storeToRefs(useAppStore())
+  const { globalSettings, host, database, username, password, databaseList, userTimezone, authHeader } = storeToRefs(
+    useAppStore()
+  )
 
   const loginStatus = ref('')
   const loginLoading = ref(false)
@@ -82,6 +94,7 @@ a-drawer.settings-drawer(
     databaseList,
     database: database.value,
     userTimezone: userTimezone.value,
+    authHeader: authHeader.value,
   })
 
   const save = async () => {
@@ -118,6 +131,7 @@ a-drawer.settings-drawer(
         databaseList: databaseList.value,
         database: database.value,
         userTimezone: userTimezone.value,
+        authHeader: authHeader.value || 'Authorization',
       }
       loginStatus.value = ''
     }

src/components/refresh-playground-modal/index.vue

@@ -14,7 +14,6 @@ a-modal.guide-modal(
 
 <script lang="ts" setup name="RefreshPlaygroundModal">
   import { createPlayground } from '@/api/playground'
-  import { useStorage } from '@vueuse/core'
 
   const appStore = useAppStore()
   const props = defineProps({

src/config/settings.json

@@ -23,5 +23,6 @@
   "lifetime": "long",
   "menuSelectedKey": "tables",
   "userTimezone": "",
-  "isFullScreen": false
+  "isFullScreen": false,
+  "authHeader": "Authorization"
 }

src/locale/en-US/settings.ts

@@ -9,4 +9,6 @@ export default {
   'settings.timezone': 'Timezone',
   'settings.saveTip': 'Authentication failed. Please check your settings.',
   'settings.saveSuccess': 'Success!',
+  'settings.authHeader': 'Authentication Header Name',
+  'settings.authHeaderTip': 'The name of the HTTP header that is used for authentication.',
 }

src/locale/zh-CN/settings.ts

@@ -9,4 +9,6 @@ export default {
   'settings.timezone': '时区',
   'settings.saveTip': '认证失败，请检查您的设置。',
   'settings.saveSuccess': '保存成功！',
+  'settings.authHeader': '认证头名称',
+  'settings.authHeaderTip': '用于认证的HTTP头的名称。',
 }

src/router/guard/userLoginInfo.ts

@@ -32,7 +32,7 @@ export default function setupUserLoginInfoGuard(router: Router) {
       appStore.updateSettings(useStorage('config', {}).value)
       const { role } = storeToRefs(useUserStore())
 
-      const { username, password, database, guideModalVisible } = storeToRefs(useAppStore())
+      const { guideModalVisible } = storeToRefs(useAppStore())
       if (role.value === 'cloud') {
         guideModalVisible.value = true
       }

src/store/modules/app/index.ts

@@ -36,6 +36,7 @@ const useAppStore = defineStore('app', {
           database: this.database,
           username: this.username,
           password: this.password,
+          authHeader: this.authHeader,
         }
       }
       useStorage('config', config, localStorage, {

src/store/modules/app/types.ts

@@ -26,5 +26,6 @@ export interface AppState {
   menuSelectedKey: string
   userTimezone: string
   isFullScreen: boolean
+  authHeader: string
   [key: string]: unknown
 }