From 0293f319570c888f1f52010bce2e2e7e570f689c Mon Sep 17 00:00:00 2001 From: Hiveer Date: Mon, 7 Apr 2025 15:36:11 +0800 Subject: [PATCH 1/3] Draft MR From c833afbda3df57fe5d246854a3ef0e87507d9265 Mon Sep 17 00:00:00 2001 From: HiveerLi Date: Mon, 7 Apr 2025 07:36:53 +0000 Subject: [PATCH 2/3] Refactor fetchApi imports and simplify useFetchApi export statement --- .../fetchResourceInCategory.js | 2 +- frontend/src/packs/useFetchApi.js | 109 ++++++++++-------- 2 files changed, 59 insertions(+), 52 deletions(-) diff --git a/frontend/src/components/shared/deploy_instance/fetchResourceInCategory.js b/frontend/src/components/shared/deploy_instance/fetchResourceInCategory.js index 592273456..65f007f0b 100644 --- a/frontend/src/components/shared/deploy_instance/fetchResourceInCategory.js +++ b/frontend/src/components/shared/deploy_instance/fetchResourceInCategory.js @@ -1,4 +1,4 @@ -import { useFetchApi } from '../../../packs/useFetchApi' +import useFetchApi from '@/packs/useFetchApi' import { useCookies } from 'vue3-cookies' import { all as all_en } from "../../../locales/en_js/all.js" import { all as all_zh } from "../../../locales/zh_js/all.js" diff --git a/frontend/src/packs/useFetchApi.js b/frontend/src/packs/useFetchApi.js index 78dac75e9..a1be270e5 100644 --- a/frontend/src/packs/useFetchApi.js +++ b/frontend/src/packs/useFetchApi.js @@ -1,32 +1,34 @@ import { createFetch } from '@vueuse/core' import { useCookies } from 'vue3-cookies' -import { ElMessageBox } from "element-plus"; +import { ElMessageBox } from 'element-plus' import refreshJWT from './refreshJWT' +import trackPageEvent from '../packs/trackPageEvent' -import { user_sessions as sessions_en } from "../locales/en_js/user_sessions.js" -import { user_sessions as sessions_zh } from "../locales/zh_js/user_sessions.js" +import { user_sessions as sessions_en } from '../locales/en_js/user_sessions.js' +import { user_sessions as sessions_zh } from '../locales/zh_js/user_sessions.js' -import { logout } from "./auth" +import { logout } from './auth' -const { cookies } = useCookies(); +const { cookies } = useCookies() const popupReloginDialog = () => { - const sessionLocale = cookies.get('locale') === 'en' ? sessions_en : sessions_zh + const sessionLocale = + cookies.get('locale') === 'en' ? sessions_en : sessions_zh ElMessageBox.confirm(sessionLocale.expiredDesc, sessionLocale.expiredTitle, { 'show-close': false, - confirmButtonText: sessionLocale.reLogin, - cancelButtonText: sessionLocale.cancelLogin, + 'confirmButtonText': sessionLocale.reLogin, + 'cancelButtonText': sessionLocale.cancelLogin }) .then(() => { - window.location.href = "/logout?redirect_to=/login"; + window.location.href = '/logout?redirect_to=/login' }) .catch(() => { - window.location.href = "/logout"; + window.location.href = '/logout' }) .finally(() => { logout() - }); -}; + }) +} const acceptLanguage = () => { const currentLocale = cookies.get('locale') @@ -39,50 +41,55 @@ const acceptLanguage = () => { } } +const createFetchOptions = { + async beforeFetch({ options }) { + const loginIdentity = cookies.get('login_identity') + if (loginIdentity) { + await refreshJWT() + const jwtToken = cookies.get('user_token') + options.headers = { + ...options.headers, + 'Authorization': `Bearer ${jwtToken}`, + 'Accept-Language': acceptLanguage() + } + } + return { options } + }, + + // This callback is triggered for any non-2xx status code. + // For known server errors (e.g., 401), the data will contain the server's error message, + // such as {"msg":"unknown user, please login first"}. + // For unknown server errors (e.g., 500), the data will be undefined, + // and the error will contain the error information. + // There are cases where the fetch fails but no response is received. + onFetchError({ data, error, response }) { + if (error) { + trackPageEvent({ id: 'api_server_err', m: 'error', v: error.message }) + } + + // there is case in which the fetch is error but the response is nil + if (!response) { + console.error('Fetch Error: No response received', data || error) + return { error: data || error } + } + + if (response.status === 401) { + popupReloginDialog() + } else { + console.log('Fetch Error:', data || error) + return { error: data || error } + } + } +} + // the return of useFetchApi will be an object which has attributes like: data, error, response // data.value will be the truely response body, so if we have a response like: // {"msg":"OK","data":null} // data.value will be {"msg":"OK","data":null} // data.value.data will be null, you should becareful to use data.value.data to get the truely data -export const useFetchApi = createFetch({ +export default createFetch({ updateDataOnError: true, baseUrl: `${CSGHUB_SERVER}/api/v1`, combination: 'chain', - options: { - async beforeFetch({ options }) { - const loginIdentity = cookies.get('login_identity') - if (loginIdentity) { - await refreshJWT() - const jwtToken = cookies.get('user_token') - options.headers = { - ...options.headers, - Authorization: `Bearer ${jwtToken}`, - 'Accept-Language': acceptLanguage() - } - } - return { options } - }, - // This callback is triggered for any non-2xx status code. - // For known server errors (e.g., 401), the data will contain the server's error message, - // such as {"msg":"unknown user, please login first"}. - // For unknown server errors (e.g., 500), the data will be undefined, - // and the error will contain the error information. - // There are cases where the fetch fails but no response is received. - onFetchError({ data, error, response }) { - // there is case in which the fetch is error but the response is nil - if (!response) { - console.error('Fetch Error: No response received', data || error); - return { error: data || error }; - } - - if (response.status === 401) { - popupReloginDialog(); - } else { - console.log("Fetch Error:", data || error); - return { error: data || error }; - } - } - } -}) - -export default useFetchApi; + options: createFetchOptions +}) \ No newline at end of file From 7d6cf4a0720d77a8db61b38c00d3a502ad3661ad Mon Sep 17 00:00:00 2001 From: Hiveer Date: Mon, 7 Apr 2025 15:44:41 +0800 Subject: [PATCH 3/3] fix(useFetchApi): remove unused trackPageEvent import - Remove import of trackPageEvent - Eliminate error tracking in onFetchError --- frontend/src/packs/useFetchApi.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/packs/useFetchApi.js b/frontend/src/packs/useFetchApi.js index a1be270e5..7cbaf18c0 100644 --- a/frontend/src/packs/useFetchApi.js +++ b/frontend/src/packs/useFetchApi.js @@ -2,7 +2,6 @@ import { createFetch } from '@vueuse/core' import { useCookies } from 'vue3-cookies' import { ElMessageBox } from 'element-plus' import refreshJWT from './refreshJWT' -import trackPageEvent from '../packs/trackPageEvent' import { user_sessions as sessions_en } from '../locales/en_js/user_sessions.js' import { user_sessions as sessions_zh } from '../locales/zh_js/user_sessions.js' @@ -63,10 +62,6 @@ const createFetchOptions = { // and the error will contain the error information. // There are cases where the fetch fails but no response is received. onFetchError({ data, error, response }) { - if (error) { - trackPageEvent({ id: 'api_server_err', m: 'error', v: error.message }) - } - // there is case in which the fetch is error but the response is nil if (!response) { console.error('Fetch Error: No response received', data || error)