Jelajahi Sumber

[frontend] Limit baseUrl setting to the active axios instance and add bearer token interceptor

Johan Åhlén 4 tahun lalu
induk
melakukan
9015d51487

+ 34 - 9
desktop/core/src/desktop/js/api/utils.ts

@@ -23,6 +23,7 @@ import axios, {
 } from 'axios';
 import qs from 'qs';
 import huePubSub from 'utils/huePubSub';
+import { hueWindow } from '../types/types';
 
 import { CancellablePromise } from './cancellablePromise';
 import hueUtils from 'utils/hueUtils';
@@ -53,6 +54,36 @@ export interface ApiFetchOptions<T, E = string> extends AxiosRequestConfig {
   ) => void;
 }
 
+const axiosInstance = axios.create();
+
+let baseUrl = (window as hueWindow).HUE_BASE_URL;
+let bearerToken: string | undefined;
+
+axiosInstance.interceptors.request.use(config => {
+  if (baseUrl) {
+    config.baseURL = baseUrl;
+  }
+  if (bearerToken) {
+    config.headers['Authorization'] = `Bearer ${bearerToken}`;
+  }
+  return config;
+});
+
+axiosInstance.interceptors.response.use(response => {
+  if (response.data?.token) {
+    bearerToken = response.data.token;
+  }
+  return response;
+});
+
+export const setBaseUrl = (newBaseUrl: string): void => {
+  baseUrl = newBaseUrl;
+};
+
+export const setBearerToken = (newBearerToken: string): void => {
+  bearerToken = newBearerToken;
+};
+
 export const successResponseIsError = (responseData?: DefaultApiResponse): boolean => {
   return (
     typeof responseData !== 'undefined' &&
@@ -156,7 +187,7 @@ export const post = <T, U = unknown, E = string>(
     const { cancelToken, cancel } = getCancelToken();
     let completed = false;
 
-    axios
+    axiosInstance
       .post<T & DefaultApiResponse>(url, qs.stringify(data), {
         cancelToken,
         ...options
@@ -194,7 +225,7 @@ export const get = <T, U = unknown>(
     const { cancelToken, cancel } = getCancelToken();
     let completed = false;
 
-    axios
+    axiosInstance
       .get<T & DefaultApiResponse>(url, {
         cancelToken,
         params: data
@@ -221,7 +252,7 @@ export const upload = async <T>(
   data: FormData,
   progressCallback?: (progress: number) => void
 ): Promise<T> => {
-  const response = await axios.post<T>(url, data, {
+  const response = await axiosInstance.post<T>(url, data, {
     headers: { 'Content-Type': 'multipart/form-data' },
     onUploadProgress: progressEvent => {
       if (progressCallback) {
@@ -231,9 +262,3 @@ export const upload = async <T>(
   });
   return response.data;
 };
-
-export const cancelActiveRequest = (request?: JQuery.jqXHR): void => {
-  if (request && request.readyState < 4) {
-    request.abort();
-  }
-};

+ 5 - 8
desktop/core/src/desktop/js/apps/editor/components/QueryEditorWebComponents.ts

@@ -14,13 +14,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import axios from 'axios';
-
 import ExecutableProgressBar from './ExecutableProgressBar.vue';
 import QueryHistoryTable from './QueryHistoryTable.vue';
 import AceEditor from './aceEditor/AceEditor.vue';
 import ResultTable from './result/ResultTable.vue';
 import Executor, { ExecutorOptions } from '../execution/executor';
+import { setBaseUrl, setBearerToken } from 'api/utils';
 import ExecuteButton from 'apps/editor/components/ExecuteButton.vue';
 import ExecuteLimitInput from 'apps/editor/components/ExecuteLimitInput.vue';
 import SqlAssistPanel from 'components/assist/SqlAssistPanel.vue';
@@ -32,7 +31,6 @@ import { findEditorConnector, refreshConfig } from 'config/hueConfig';
 import { Connector } from 'config/types';
 import { wrap } from 'vue/webComponentWrap';
 import 'utils/json.bigDataParse';
-import { hueWindow } from 'types/types';
 
 wrap('hue-icons', HueIcons);
 wrap('query-editor', AceEditor);
@@ -46,13 +44,12 @@ wrap('sql-context-selector', SqlContextSelector);
 
 export interface HueComponentConfig {
   baseUrl?: string;
+  bearerToken?: string;
 }
 
-const configure = (config: HueComponentConfig): void => {
-  if (config.baseUrl) {
-    axios.defaults.baseURL = config.baseUrl;
-    (window as hueWindow).HUE_BASE_URL = config.baseUrl;
-  }
+const configure = ({ baseUrl, bearerToken }: HueComponentConfig): void => {
+  baseUrl && setBaseUrl(baseUrl);
+  bearerToken && setBearerToken(bearerToken);
 };
 
 const createExecutor = (options: ExecutorOptions): Executor => new Executor(options);