Add centralized API client with axios interceptors, remove vue-axios

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package-lock.json

@@ -32,7 +32,6 @@
         "primevue": "^4.5.4",
         "tippy.js": "^6.3.7",
         "vue": "^3.5.29",
-        "vue-axios": "^3.5.2",
         "vue-chartjs": "^5.3.3",
         "vue-router": "^5.0.3",
         "vue-sweetalert2": "^5.0.11",
@@ -7997,15 +7996,6 @@
         }
       }
     },
-    "node_modules/vue-axios": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.5.2.tgz",
-      "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
-      "peerDependencies": {
-        "axios": "*",
-        "vue": "^3.0.0 || ^2.0.0"
-      }
-    },
     "node_modules/vue-chartjs": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",
@@ -13305,11 +13295,6 @@
         "@vue/shared": "3.5.29"
       }
     },
-    "vue-axios": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.5.2.tgz",
-      "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g=="
-    },
     "vue-chartjs": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.3.tgz",

package.json

@@ -39,7 +39,6 @@
     "primevue": "^4.5.4",
     "tippy.js": "^6.3.7",
     "vue": "^3.5.29",
-    "vue-axios": "^3.5.2",
     "vue-chartjs": "^5.3.3",
     "vue-router": "^5.0.3",
     "vue-sweetalert2": "^5.0.11",

src/api/auth.js

@@ -0,0 +1,33 @@
+import axios from 'axios';
+import { getCookie, setCookie, setCookieWithoutExpiration } from '@/utils/cookieUtil.js';
+
+/**
+ * Refresh the access token using the refresh token cookie.
+ * Uses plain axios (not apiClient) to avoid interceptor loops.
+ * @returns {Promise<string>} The new access token.
+ */
+export async function refreshTokenAndGetNew() {
+  const api = '/api/oauth/token';
+  const config = {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  };
+  const data = {
+    grant_type: 'refresh_token',
+    refresh_token: getCookie('luciaRefreshToken'),
+  };
+
+  const response = await axios.post(api, data, config);
+  const newAccessToken = response.data.access_token;
+  const newRefreshToken = response.data.refresh_token;
+
+  setCookieWithoutExpiration('luciaToken', newAccessToken);
+  // Expire in ~6 months
+  const expiredMs = new Date();
+  expiredMs.setMonth(expiredMs.getMonth() + 6);
+  const days = Math.ceil((expiredMs.getTime() - Date.now()) / (24 * 60 * 60 * 1000));
+  setCookie('luciaRefreshToken', newRefreshToken, days);
+
+  return newAccessToken;
+}

src/api/client.js

@@ -0,0 +1,78 @@
+import axios from 'axios';
+import { getCookie, deleteCookie } from '@/utils/cookieUtil.js';
+
+const apiClient = axios.create();
+
+// Request interceptor: automatically attach Authorization header
+apiClient.interceptors.request.use((config) => {
+  const token = getCookie('luciaToken');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// Response interceptor: handle 401 by attempting token refresh
+let isRefreshing = false;
+let pendingRequests = [];
+
+function onRefreshSuccess(newToken) {
+  pendingRequests.forEach((cb) => cb(newToken));
+  pendingRequests = [];
+}
+
+function onRefreshFailure(error) {
+  pendingRequests.forEach((cb) => cb(null, error));
+  pendingRequests = [];
+}
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // Only attempt refresh on 401, and not for auth endpoints or already-retried requests
+    if (
+      error.response?.status !== 401 ||
+      originalRequest._retried ||
+      originalRequest.url === '/api/oauth/token'
+    ) {
+      return Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      // Queue this request until the refresh completes
+      return new Promise((resolve, reject) => {
+        pendingRequests.push((newToken, err) => {
+          if (err) return reject(err);
+          originalRequest.headers.Authorization = `Bearer ${newToken}`;
+          originalRequest._retried = true;
+          resolve(apiClient(originalRequest));
+        });
+      });
+    }
+
+    isRefreshing = true;
+    originalRequest._retried = true;
+
+    try {
+      // Dynamic import to avoid circular dependency with login store
+      const { refreshTokenAndGetNew } = await import('@/api/auth.js');
+      const newToken = await refreshTokenAndGetNew();
+      isRefreshing = false;
+      onRefreshSuccess(newToken);
+      originalRequest.headers.Authorization = `Bearer ${newToken}`;
+      return apiClient(originalRequest);
+    } catch (refreshError) {
+      isRefreshing = false;
+      onRefreshFailure(refreshError);
+
+      // Refresh failed: clear auth and redirect to login
+      deleteCookie('luciaToken');
+      window.location.href = '/login';
+      return Promise.reject(refreshError);
+    }
+  }
+);
+
+export default apiClient;

src/main.ts

@@ -3,8 +3,6 @@ import { createApp, markRaw } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import pinia from '@/stores/main.js';
-import axios from 'axios';
-import VueAxios from 'vue-axios';
 import moment from 'moment';
 import mitt from 'mitt';
 import ToastPlugin from 'vue-toast-notification';
@@ -49,15 +47,9 @@ import ContextMenu from 'primevue/contextmenu';
 const emitter = mitt();
 const app = createApp(App);
 
-// 將 Axios 實例添加到 Vue 的應用實例中
-app.config.globalProperties.$http = axios;
-app.$http = axios; // 將 $http 添加到 Vue 實例中
 // Pinia Set
 pinia.use(({ store }) => {
   store.$router = markRaw(router);
-  store.$axios = markRaw(axios);
-  store.$toast = markRaw(ToastPlugin);
-  store.$http = app.$http;
 });
 
 // can use `this.$moment` in Vue.js
@@ -72,7 +64,6 @@ cytoscape.use( popper((ref) => ref) );
 
 app.use(pinia);
 app.use(router);
-app.use(VueAxios, axios);
 app.use(VueSweetalert2);
 app.use(ToastPlugin, { // use `this.$toast` in Vue.js
   position: 'bottom',

src/module/apiError.js

@@ -1,25 +1,17 @@
-import router from "@/router/index";
 import loadingStore from '@/stores/loading.js';
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
-import axios from "axios";
-import { deleteCookie } from "@/utils/cookieUtil.js";
 
 // Delay loading and toast
 const delay = (s = 0) =>  new Promise((resolve, reject) => setTimeout(resolve, s));
 
 /**
- * API catch error function
+ * API catch error function.
- * @param   {object} Error 後端 ERROR
+ * 401 errors are handled by the axios response interceptor in api/client.js.
+ * @param   {object} error 後端 ERROR
  * @param   {string} toastMessage Toast 的提示文字
- * @returns {string}        Error HTTP Status
  */
 export default async function apiError(error, toastMessage) {
-  if(error.request?.status === 401) {
-    delete axios.defaults.headers.common["Authorization"];
-    deleteCookie("luciaToken");
-    return router.push('/login');
-  }
   const loading = loadingStore();
   const $toast = useToast();
   await delay();

src/stores/acctMgmt.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import apiClient from '@/api/client.js';
 import apiError from '@/module/apiError';
 import piniaLoginStore from '@/stores/login';
 import { JUST_CREATE_ACCOUNT_HOT_DURATION_MINS } from '@/constants/constants';
@@ -87,7 +88,7 @@ export default defineStore('acctMgmtStore', {
     async getAllUserAccounts() {
       const apiGetUserList = `/api/users`;
       try {
-        const response = await this.$axios.get(apiGetUserList);
+        const response = await apiClient.get(apiGetUserList);
         const customizedResponseData = await this.customizeAllUserList(response.data);
         this.allUserAccoutList = await this.moveCurrentLoginUserToFirstRow(customizedResponseData);
       } catch (error) {
@@ -135,7 +136,7 @@ export default defineStore('acctMgmtStore', {
       const apiCreateAccount = `/api/users`;
 
       try {
-        const response = await this.$axios.post(apiCreateAccount, userToCreate);
+        const response = await apiClient.post(apiCreateAccount, userToCreate);
         if (response.status === 200) {
           this.isOneAccountJustCreate = true;
           this.justCreateUsername = userToCreate.username;
@@ -154,7 +155,7 @@ export default defineStore('acctMgmtStore', {
       const apiDelete = `/api/users/${userToDelete}`;
 
       try {
-        const response = await this.$axios.delete(apiDelete);
+        const response = await apiClient.delete(apiDelete);
         return response.status === 200;
       } catch (error) {
         apiError(error, 'Failed to delete the account.');
@@ -170,7 +171,7 @@ export default defineStore('acctMgmtStore', {
       const apiEdit = `/api/users/${userToEdit}`;
 
       try {
-        const response = await this.$axios.put(apiEdit, {
+        const response = await apiClient.put(apiEdit, {
           username: editDetail.newUsername ? editDetail.newUsername : editDetail.username,
           password: editDetail.password,
           name: editDetail.name,
@@ -186,7 +187,7 @@ export default defineStore('acctMgmtStore', {
       const apiEdit = `/api/users/${userToEdit}`;
 
       try {
-        const response = await this.$axios.put(apiEdit, {
+        const response = await apiClient.put(apiEdit, {
           username: userToEdit,
           name: newName,
           is_active: this.currentViewingUser.is_active,
@@ -202,7 +203,7 @@ export default defineStore('acctMgmtStore', {
       const apiEdit = `/api/users/${userToEdit}`;
 
       try {
-        const response = await this.$axios.put(apiEdit, {
+        const response = await apiClient.put(apiEdit, {
           username: userToEdit,
           name: this.currentViewingUser.name,
           password: newPwd,
@@ -223,7 +224,7 @@ export default defineStore('acctMgmtStore', {
       const apiAddRole = `/api/users/${usernameToEdit}/roles/${roleCode}`;
 
       try {
-        const response = await this.$axios.put(apiAddRole);
+        const response = await apiClient.put(apiAddRole);
         return response.status === 200;
       } catch (error) {
         apiError(error, 'Failed to add role to the account.');
@@ -238,7 +239,7 @@ export default defineStore('acctMgmtStore', {
       const apiDeleteRole = `/api/users/${usernameToEdit}/roles/${roleCode}`;
 
       try {
-        const response = await this.$axios.delete(apiDeleteRole);
+        const response = await apiClient.delete(apiDeleteRole);
         return response.status === 200;
       } catch (error) {
         apiError(error, 'Failed to delete a role frome the account.');
@@ -252,7 +253,7 @@ export default defineStore('acctMgmtStore', {
     async getUserDetail(uniqueUsername: string): Promise<boolean> {
       const apiUserDetail = `/api/users/${uniqueUsername}`;
       try {
-        const response = await this.$axios.get(apiUserDetail);
+        const response = await apiClient.get(apiUserDetail);
         this.currentViewingUser = response.data;
         this.currentViewingUser.is_admin = response.data.roles.some(role => role.code === 'admin');
         return response.status === 200;

src/stores/allMapData.js

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import moment from "moment";
+import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 import { Decimal } from 'decimal.js';
 
@@ -136,7 +137,7 @@ export default defineStore('allMapDataStore', {
       else api = `/api/logs/${logId}/discover`;
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allProcessMap = response.data.process_map;
         this.allBpmn = response.data.bpmn;
         this.allStats = response.data.stats;
@@ -163,10 +164,10 @@ export default defineStore('allMapDataStore', {
 
       try {
         let baseResponse;
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allTrace = response.data;
         if(baseLogId) {
-          baseResponse = await this.$axios.get(baseApi);
+          baseResponse = await apiClient.get(baseApi);
           this.allBaseTrace = baseResponse.data;
         }
       } catch(error) {
@@ -190,7 +191,7 @@ export default defineStore('allMapDataStore', {
       else api = `/api/logs/${logId}/traces/${traceId}?start=${start}&page_size=20`;
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allTraceTaskSeq = response.data.task_seq;
         this.allCase = response.data.cases;
         this.allCase.forEach(c => {
@@ -229,7 +230,7 @@ export default defineStore('allMapDataStore', {
       const api = `/api/logs/${logId}/traces/${traceId}?start=${start}&page_size=20`;
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allBaseTraceTaskSeq = response.data.task_seq;
         this.allBaseCase = response.data.cases;
         this.allBaseCase.forEach(c => {
@@ -266,7 +267,7 @@ export default defineStore('allMapDataStore', {
       const api = `/api/filters/params?log_id=${logId}`;
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allFilterTask = response.data.tasks;
         this.allFilterStartToEnd = response.data.sources;
         this.allFilterEndToStart = response.data.sinks;
@@ -294,7 +295,7 @@ export default defineStore('allMapDataStore', {
       const api = `/api/filters/has-result?log_id=${logId}`;
 
       try {
-        const response = await this.$axios.post(api, this.postRuleData)
+        const response = await apiClient.post(api, this.postRuleData)
         this.hasResultRule = response.data.result;
       } catch(error) {
         apiError(error, 'Failed to load the Has Result.');
@@ -308,7 +309,7 @@ export default defineStore('allMapDataStore', {
       const api = `/api/temp-filters?log_id=${logId}`;
 
       try {
-        const response = await this.$axios.post(api, this.postRuleData)
+        const response = await apiClient.post(api, this.postRuleData)
         this.tempFilterId = response.data.id;
       } catch(error) {
         apiError(error, 'Failed to add the Temporary Filters.');
@@ -327,7 +328,7 @@ export default defineStore('allMapDataStore', {
       };
 
       try {
-        const response = await this.$axios.post(api, createFilterObj);
+        const response = await apiClient.post(api, createFilterObj);
         this.createFilterId = response.data.id;
         this.tempFilterId = null;
       }catch(error) {
@@ -343,7 +344,7 @@ export default defineStore('allMapDataStore', {
 
       if(createFilterId){
         try {
-          const response = await this.$axios.get(api);
+          const response = await apiClient.get(api);
           this.temporaryData = response.data.rules;
           this.logId = response.data.log.id;
           this.filterName = response.data.name;
@@ -362,7 +363,7 @@ export default defineStore('allMapDataStore', {
       const data = this.postRuleData;
 
       try {
-        const response = await this.$axios.put(api, data);
+        const response = await apiClient.put(api, data);
         this.isUpdateFilter = response.status === 200;
         this.tempFilterId = null;
       }catch(error) {

src/stores/compare.js

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 
 export default defineStore('compareStore', {
@@ -21,7 +22,7 @@ export default defineStore('compareStore', {
       const api = `/api/compare?datasets=${encodeURIComponent(queryString)}`;
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allCompareDashboardData = response.data;
       } catch(error) {
         apiError(error, 'Failed to load the Compare.');
@@ -44,7 +45,7 @@ export default defineStore('compareStore', {
           break;
       }
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
 
         return response.data.stats;
       } catch(error) {
@@ -58,7 +59,7 @@ export default defineStore('compareStore', {
     async getFileName(id) {
       id = Number(id)
       try {
-        const response = await this.$axios.get('/api/files');
+        const response = await apiClient.get('/api/files');
         const file = response.data.find(i => i.id === id);
 
         if(file) return file.name;

src/stores/conformance.js

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import moment from "moment";
 import { Decimal } from 'decimal.js';
 import abbreviateNumber from '@/module/abbreviateNumber.js';
+import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 
 export default defineStore('conformanceStore', {
@@ -201,7 +202,7 @@ export default defineStore('conformanceStore', {
         api = `/api/log-checks/params?log_id=${logId}`;
       }
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allConformanceTask = response.data.tasks;
         this.allCfmSeqStart = response.data.sources;
         this.allCfmSeqEnd = response.data.sinks;
@@ -230,7 +231,7 @@ export default defineStore('conformanceStore', {
       }
 
       try {
-        const response = await this.$axios.post(api, data);
+        const response = await apiClient.post(api, data);
         if(filterId !== null) {
           this.conformanceFilterTempCheckId = response.data.id;
         }
@@ -266,7 +267,7 @@ export default defineStore('conformanceStore', {
         api = `/api/log-checks/${logCreateCheckId}`;
       }
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         if(!getRouteFile) {
           this.allConformanceTempReportData = response.data
         } else {
@@ -302,7 +303,7 @@ export default defineStore('conformanceStore', {
       }
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allIssueTraces = response.data.traces;
       } catch(error) {
         apiError(error, 'Failed to Get the detail of a temporary log conformance issue.');
@@ -336,7 +337,7 @@ export default defineStore('conformanceStore', {
       }
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allTaskSeq = response.data.task_seq;
         this.allCases = response.data.cases;
         return response.data.cases;
@@ -366,7 +367,7 @@ export default defineStore('conformanceStore', {
       else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/loops/${loopNo}`;
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allLoopTraces = response.data.traces;
       } catch(error) {
         apiError(error, 'Failed to Get the detail of a temporary log conformance loop.');
@@ -392,7 +393,7 @@ export default defineStore('conformanceStore', {
       else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`;
 
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allLoopTaskSeq = response.data.task_seq;
         this.allLoopCases = response.data.cases;
         return response.data.cases;
@@ -422,7 +423,7 @@ export default defineStore('conformanceStore', {
       else api = `/api/log-checks?log_id=${logId}`;
 
       try {
-        const response = await this.$axios.post(api, data);
+        const response = await apiClient.post(api, data);
         if(filterId !== null) {
           this.conformanceFilterCreateCheckId = response.data.id;
           this.conformanceFilterTempCheckId = null;
@@ -449,7 +450,7 @@ export default defineStore('conformanceStore', {
       else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}`;
 
       try {
-        const response = await this.$axios.put(api, data);
+        const response = await apiClient.put(api, data);
         this.isUpdateConformance = response.status === 200;
         this.conformanceLogTempCheckId = null;
         this.conformanceFilterTempCheckId = null;

src/stores/files.js

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import axios from "axios";
+import apiClient from "@/api/client.js";
 import moment from 'moment';
 import apiError from '@/module/apiError.js';
 import Swal from 'sweetalert2';
@@ -66,7 +66,7 @@ export default defineStore('filesStore', {
       let parentLog = '';
 
       try {
-        const response = await axios.get(api);
+        const response = await apiClient.get(api);
 
         this.allEventFiles = response.data;
         this.allEventFiles.forEach(o => {
@@ -119,7 +119,7 @@ export default defineStore('filesStore', {
 
       uploadloader(); // 進度條
       try {
-        const response = await axios.post(api, fromData, config);
+        const response = await apiClient.post(api, fromData, config);
 
         this.uploadId = response.data.id;
         this.$router.push({name: 'Upload'});
@@ -145,7 +145,7 @@ export default defineStore('filesStore', {
       const api = `/api/logs/csv-uploads/${uploadId}`;
 
       try {
-        const response = await axios.get(api);
+        const response = await apiClient.get(api);
         this.allUploadDetail = response.data.preview;
       } catch(error) {
         apiError(error, 'Failed to get upload detail.');
@@ -161,7 +161,7 @@ export default defineStore('filesStore', {
 
       uploadloader(); // 進度條
       try {
-        const response = await axios.post(api, data);
+        const response = await apiClient.post(api, data);
 
         this.uploadLogId = await response.data.id;
         await Swal.close(); // 關閉進度條
@@ -211,7 +211,7 @@ export default defineStore('filesStore', {
           break;
       }
       try {
-        await axios.put(api, data);
+        await apiClient.put(api, data);
         this.uploadFileName = null;
         await this.fetchAllFiles();
       } catch(error) {
@@ -241,7 +241,7 @@ export default defineStore('filesStore', {
           break;
       }
       try {
-        const response = await axios.get(api);
+        const response = await apiClient.get(api);
         this.allDependentsData = response.data;
       } catch(error) {
         apiError(error, 'Failed to get Dependents of the files.');
@@ -276,7 +276,7 @@ export default defineStore('filesStore', {
           break;
       }
       try {
-        await axios.delete(api);
+        await apiClient.delete(api);
         await this.fetchAllFiles();
         await deleteSuccess();
       } catch(error) {
@@ -296,7 +296,7 @@ export default defineStore('filesStore', {
       loading.isLoading = true;
       api = `/api/deletion/${id}`;
       try {
-        await axios.delete(api);
+        await apiClient.delete(api);
       } catch(error) {
         apiError(error, 'Failed to Remove a Deletion Record.')
       } finally {
@@ -329,7 +329,7 @@ export default defineStore('filesStore', {
           return;
       }
       try {
-        const response = await axios.get(api);
+        const response = await apiClient.get(api);
         const csvData = response.data;
         const blob = new Blob([csvData], { type: 'text/csv' });
         const url = window.URL.createObjectURL(blob);

src/stores/login.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import axios from 'axios';
+import apiClient from '@/api/client.js';
 import apiError from '@/module/apiError.js';
 import { deleteCookie, setCookie, setCookieWithoutExpiration, getCookie } from "../utils/cookieUtil";
 
@@ -78,8 +79,6 @@ export default defineStore('loginStore', {
 
           setCookieWithoutExpiration("luciaToken", newAccessToken);
           setCookie("luciaRefreshToken", newRefreshToken, Math.ceil((this.expired - Date.now()) / (24 * 60 * 60 * 1000)));
-
-          axios.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
         }
       } catch(error) {
         // 若refresh token 失敗則導向至登入頁面
@@ -91,7 +90,6 @@ export default defineStore('loginStore', {
      * Logout, token expired
      */
     logOut() {
-      delete axios.defaults.headers.common["Authorization"];
       deleteCookie("luciaToken");
 
       this.isLoggedIn = false;
@@ -106,7 +104,7 @@ export default defineStore('loginStore', {
       const api = '/api/my-account';
 
       try {
-        const response = await axios.get(api);
+        const response = await apiClient.get(api);
 
         this.userData = response.data;
       } catch(error) {
@@ -120,7 +118,7 @@ export default defineStore('loginStore', {
       const api = '/api/my-account';
 
       try {
-        await axios.get(api);
+        await apiClient.get(api);
       } catch(error) {
         this.$router.push('/login');
       };

src/stores/performance.js

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 
 export default defineStore('performanceStore', {
@@ -36,7 +37,7 @@ export default defineStore('performanceStore', {
           break;
       }
       try {
-        const response = await this.$axios.get(api);
+        const response = await apiClient.get(api);
         this.allPerformanceData = response.data;
       } catch(error) {
         apiError(error, 'Failed to load the Performance.');

src/types/shims-vue.d.ts

@@ -4,11 +4,3 @@ declare module '*.vue' {
     const component: DefineComponent<{}, {}, any>;
     export default component;
   }
-  
-  declare module 'vue/types/vue' {
-    import { AxiosInstance } from 'axios';
-    interface Vue {
-      $axios: AxiosInstance;
-    }
-  }
-  

src/types/store.d.ts

@@ -1,7 +1,8 @@
-import { AxiosInstance } from 'axios';
+import 'pinia';
+import { Router } from 'vue-router';
 
 declare module 'pinia' {
   export interface PiniaCustomProperties {
-    $axios: AxiosInstance;
+    $router: Router;
   }
 }

src/types/vue-axios.d.ts

@@ -1,7 +1 @@
-import { AxiosInstance } from 'axios';
+// vue-axios type declarations removed — API client is used directly
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $axios: AxiosInstance;
-  }
-}

src/types/vue.d.ts

@@ -1,15 +1 @@
-import { AxiosInstance } from 'axios';
 import { App } from 'vue';
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $http: AxiosInstance;
-  }
-}
-
-// 將類型擴展到 Vue 應用實例
-declare module 'vue' {
-  interface App {
-    $http: AxiosInstance;
-  }
-}

src/views/Compare/MapCompare.vue

@@ -56,8 +56,6 @@
   import { onBeforeMount, computed, } from 'vue';
   import { storeToRefs } from 'pinia';
   import { useRoute } from 'vue-router';
-  import axios from 'axios';
-  import { getCookie } from "@/utils/cookieUtil.js";
   import LoadingStore from '@/stores/loading.js';
   import AllMapDataStore from '@/stores/allMapData.js';
   import ConformanceStore from '@/stores/conformance.js';
@@ -519,10 +517,6 @@
   
       if (isCheckPage) {
         const conformanceStore = ConformanceStore();
-        // Save token in Headers.
-        const token = getCookie('luciaToken');
-  
-        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
         switch (to.params.type) {
           case 'log':
             conformanceStore.conformanceLogCreateCheckId = to.params.fileId;

src/views/Discover/Conformance/index.vue

@@ -9,13 +9,11 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import axios from 'axios';
 import LoadingStore from '@/stores/loading.js';
 import ConformanceStore from '@/stores/conformance.js';
 import StatusBar from '@/components/Discover/StatusBar.vue';
 import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
 import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
-import { getCookie } from "@/utils/cookieUtil.js";
 
 export default {
   setup() {
@@ -99,10 +97,6 @@ export default {
       // ([^;]*)：捕獲 "luciaToken" 的值，直到遇到下一個分號或字符串結尾。
       // .*$：匹配剩餘的字符，確保完整的提取。
       // |^.*$：在找不到 "luciaToken" 的情況下，匹配整個字符串。
-      // 實際應用
-      const token = getCookie('luciaToken');
-
-      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
       switch (to.params.type) {
         case 'log':
           conformanceStore.setConformanceLogCreateCheckId(to.params.fileId);

src/views/Discover/Map/Map.vue

@@ -64,8 +64,6 @@
 import { onBeforeMount, computed, } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
-import axios from 'axios';
-import { getCookie } from "@/utils/cookieUtil.js";
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
@@ -537,10 +535,6 @@ export default {
 
     if (isCheckPage) {
       const conformanceStore = ConformanceStore();
-      // Save token in Headers.
-      const token = getCookie('luciaToken');
-
-      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
       switch (to.params.type) {
         case 'log':
           conformanceStore.conformanceLogCreateCheckId = to.params.fileId;

src/views/Discover/Performance/index.vue

@@ -137,7 +137,6 @@
 </template>
 <script>
 import { storeToRefs, mapActions, } from 'pinia';
-import axios from 'axios';
 import moment from 'moment';
 import LoadingStore from '@/stores/loading.js';
 import PerformanceStore from '@/stores/performance.js';
@@ -152,7 +151,6 @@ import { simpleTimeLabel, followTimeLabel,
  } from '@/module/timeLabel.js';
 import FreqChart from './FreqChart.vue';
 import { PRIME_VUE_TICKS_LIMIT } from '../../../constants/constants.js';
-import { getCookie } from "@/utils/cookieUtil.js";
 
 const primeVueTicksLimit = PRIME_VUE_TICKS_LIMIT;
 
@@ -921,10 +919,6 @@ export default {
 
     if (isCheckPage) {
       const conformanceStore = ConformanceStore();
-      // Save token in Headers.
-      const token = getCookie('luciaToken');
-
-      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
       switch (to.params.type) {
         case 'log':
           conformanceStore.conformanceLogCreateCheckId = to.params.fileId;

src/views/MainContainer.vue

@@ -85,11 +85,6 @@ export default {
       'refreshToken',
     ],),
   },
-  created() {
-    // Save token in Headers.
-    const token = getCookie('luciaToken');
-    this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-  },
   // 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
     // PSEUDOCODE
     // if (not logged in) {

tests/stores/acctMgmt.test.js

@@ -5,6 +5,13 @@ vi.mock('@/module/apiError.js', () => ({
   default: vi.fn(),
 }));
 
+const { mockGet, mockPost, mockPut, mockDelete } = vi.hoisted(() => ({
+  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(), mockDelete: vi.fn(),
+}));
+vi.mock('@/api/client.js', () => ({
+  default: { get: mockGet, post: mockPost, put: mockPut, delete: mockDelete },
+}));
+
 // Mock login store to avoid its side effects
 vi.mock('@/stores/login.ts', () => {
   const { defineStore } = require('pinia');
@@ -24,17 +31,10 @@ import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 
 describe('acctMgmtStore', () => {
   let store;
-  const mockAxios = {
-    get: vi.fn(),
-    post: vi.fn(),
-    put: vi.fn(),
-    delete: vi.fn(),
-  };
 
   beforeEach(() => {
     setActivePinia(createPinia());
     store = useAcctMgmtStore();
-    store.$axios = mockAxios;
     vi.clearAllMocks();
   });
 
@@ -84,12 +84,12 @@ describe('acctMgmtStore', () => {
 
   describe('createNewAccount', () => {
     it('posts to /api/users and sets flag on success', async () => {
-      mockAxios.post.mockResolvedValue({ status: 200 });
+      mockPost.mockResolvedValue({ status: 200 });
       const user = { username: 'newuser', password: 'pass' };
 
       await store.createNewAccount(user);
 
-      expect(mockAxios.post).toHaveBeenCalledWith(
+      expect(mockPost).toHaveBeenCalledWith(
         '/api/users', user,
       );
       expect(store.isOneAccountJustCreate).toBe(true);
@@ -99,18 +99,18 @@ describe('acctMgmtStore', () => {
 
   describe('deleteAccount', () => {
     it('returns true on success', async () => {
-      mockAxios.delete.mockResolvedValue({ status: 200 });
+      mockDelete.mockResolvedValue({ status: 200 });
 
       const result = await store.deleteAccount('alice');
 
-      expect(mockAxios.delete).toHaveBeenCalledWith(
+      expect(mockDelete).toHaveBeenCalledWith(
         '/api/users/alice',
       );
       expect(result).toBe(true);
     });
 
     it('returns false on error', async () => {
-      mockAxios.delete.mockRejectedValue(new Error('fail'));
+      mockDelete.mockRejectedValue(new Error('fail'));
 
       const result = await store.deleteAccount('alice');
 
@@ -120,7 +120,7 @@ describe('acctMgmtStore', () => {
 
   describe('editAccount', () => {
     it('puts edited data', async () => {
-      mockAxios.put.mockResolvedValue({ status: 200 });
+      mockPut.mockResolvedValue({ status: 200 });
       const detail = {
         username: 'alice',
         password: 'newpw',
@@ -130,7 +130,7 @@ describe('acctMgmtStore', () => {
 
       const result = await store.editAccount('alice', detail);
 
-      expect(mockAxios.put).toHaveBeenCalledWith(
+      expect(mockPut).toHaveBeenCalledWith(
         '/api/users/alice',
         expect.objectContaining({ password: 'newpw' }),
       );
@@ -140,11 +140,11 @@ describe('acctMgmtStore', () => {
 
   describe('addRoleToUser', () => {
     it('puts role assignment', async () => {
-      mockAxios.put.mockResolvedValue({ status: 200 });
+      mockPut.mockResolvedValue({ status: 200 });
 
       const result = await store.addRoleToUser('alice', 'admin');
 
-      expect(mockAxios.put).toHaveBeenCalledWith(
+      expect(mockPut).toHaveBeenCalledWith(
         '/api/users/alice/roles/admin',
       );
       expect(result).toBe(true);
@@ -153,11 +153,11 @@ describe('acctMgmtStore', () => {
 
   describe('deleteRoleToUser', () => {
     it('deletes role', async () => {
-      mockAxios.delete.mockResolvedValue({ status: 200 });
+      mockDelete.mockResolvedValue({ status: 200 });
 
       const result = await store.deleteRoleToUser('alice', 'admin');
 
-      expect(mockAxios.delete).toHaveBeenCalledWith(
+      expect(mockDelete).toHaveBeenCalledWith(
         '/api/users/alice/roles/admin',
       );
       expect(result).toBe(true);
@@ -166,7 +166,7 @@ describe('acctMgmtStore', () => {
 
   describe('getUserDetail', () => {
     it('fetches user and sets admin flag', async () => {
-      mockAxios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         status: 200,
         data: {
           username: 'alice',
@@ -181,7 +181,7 @@ describe('acctMgmtStore', () => {
     });
 
     it('returns false on error', async () => {
-      mockAxios.get.mockRejectedValue(new Error('not found'));
+      mockGet.mockRejectedValue(new Error('not found'));
 
       const result = await store.getUserDetail('ghost');
 

tests/stores/allMapData.test.js

@@ -5,20 +5,21 @@ vi.mock('@/module/apiError.js', () => ({
   default: vi.fn(),
 }));
 
+const { mockGet, mockPost, mockPut } = vi.hoisted(() => ({
+  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(),
+}));
+vi.mock('@/api/client.js', () => ({
+  default: { get: mockGet, post: mockPost, put: mockPut },
+}));
+
 import useAllMapDataStore from '@/stores/allMapData.js';
 
 describe('allMapDataStore', () => {
   let store;
-  const mockAxios = {
-    get: vi.fn(),
-    post: vi.fn(),
-    put: vi.fn(),
-  };
 
   beforeEach(() => {
     setActivePinia(createPinia());
     store = useAllMapDataStore();
-    store.$axios = mockAxios;
     vi.clearAllMocks();
   });
 
@@ -37,11 +38,11 @@ describe('allMapDataStore', () => {
         stats: { cases: 10 },
         insights: {},
       };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getAllMapData();
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/logs/1/discover',
       );
       expect(store.allProcessMap).toEqual({ nodes: [] });
@@ -51,7 +52,7 @@ describe('allMapDataStore', () => {
     it('fetches temp filter discover data when set', async () => {
       store.logId = 1;
       store.tempFilterId = 5;
-      mockAxios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: {
           process_map: {},
           bpmn: {},
@@ -62,7 +63,7 @@ describe('allMapDataStore', () => {
 
       await store.getAllMapData();
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/temp-filters/5/discover',
       );
     });
@@ -70,7 +71,7 @@ describe('allMapDataStore', () => {
     it('fetches created filter discover data', async () => {
       store.logId = 1;
       store.createFilterId = 3;
-      mockAxios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: {
           process_map: {},
           bpmn: {},
@@ -81,14 +82,14 @@ describe('allMapDataStore', () => {
 
       await store.getAllMapData();
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/filters/3/discover',
       );
     });
 
     it('does not throw on API failure', async () => {
       store.logId = 1;
-      mockAxios.get.mockRejectedValue(new Error('fail'));
+      mockGet.mockRejectedValue(new Error('fail'));
 
       await expect(store.getAllMapData())
         .resolves.not.toThrow();
@@ -111,11 +112,11 @@ describe('allMapDataStore', () => {
         trace: [],
         attrs: [],
       };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getFilterParams();
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/filters/params?log_id=1',
       );
       expect(store.allFilterTask).toEqual(['A', 'B']);
@@ -129,13 +130,13 @@ describe('allMapDataStore', () => {
     it('posts rule data and stores result', async () => {
       store.logId = 1;
       store.postRuleData = [{ type: 'task' }];
-      mockAxios.post.mockResolvedValue({
+      mockPost.mockResolvedValue({
         data: { result: true },
       });
 
       await store.checkHasResult();
 
-      expect(mockAxios.post).toHaveBeenCalledWith(
+      expect(mockPost).toHaveBeenCalledWith(
         '/api/filters/has-result?log_id=1',
         [{ type: 'task' }],
       );
@@ -147,7 +148,7 @@ describe('allMapDataStore', () => {
     it('creates temp filter and stores id', async () => {
       store.logId = 1;
       store.postRuleData = [];
-      mockAxios.post.mockResolvedValue({ data: { id: 77 } });
+      mockPost.mockResolvedValue({ data: { id: 77 } });
 
       await store.addTempFilterId();
 
@@ -160,11 +161,11 @@ describe('allMapDataStore', () => {
       store.logId = 1;
       store.tempFilterId = 77;
       store.postRuleData = [{ type: 'rule' }];
-      mockAxios.post.mockResolvedValue({ data: { id: 88 } });
+      mockPost.mockResolvedValue({ data: { id: 88 } });
 
       await store.addFilterId('myFilter');
 
-      expect(mockAxios.post).toHaveBeenCalledWith(
+      expect(mockPost).toHaveBeenCalledWith(
         '/api/filters?log_id=1',
         { name: 'myFilter', rules: [{ type: 'rule' }] },
       );
@@ -178,11 +179,11 @@ describe('allMapDataStore', () => {
       store.createFilterId = 88;
       store.tempFilterId = 77;
       store.postRuleData = [{ type: 'updated' }];
-      mockAxios.put.mockResolvedValue({ status: 200 });
+      mockPut.mockResolvedValue({ status: 200 });
 
       await store.updateFilter();
 
-      expect(mockAxios.put).toHaveBeenCalledWith(
+      expect(mockPut).toHaveBeenCalledWith(
         '/api/filters/88',
         [{ type: 'updated' }],
       );
@@ -195,7 +196,7 @@ describe('allMapDataStore', () => {
     it('does not crash when baseLogId is falsy', async () => {
       store.logId = 1;
       store.baseLogId = null;
-      mockAxios.get.mockResolvedValue({ data: [{ id: 1 }] });
+      mockGet.mockResolvedValue({ data: [{ id: 1 }] });
 
       await store.getAllTrace();
 

tests/stores/compare.test.js

@@ -5,18 +5,19 @@ vi.mock('@/module/apiError.js', () => ({
   default: vi.fn(),
 }));
 
+const { mockGet } = vi.hoisted(() => ({ mockGet: vi.fn() }));
+vi.mock('@/api/client.js', () => ({
+  default: { get: mockGet },
+}));
+
 import useCompareStore from '@/stores/compare.js';
 
 describe('compareStore', () => {
   let store;
-  const mockAxios = {
-    get: vi.fn(),
-  };
 
   beforeEach(() => {
     setActivePinia(createPinia());
     store = useCompareStore();
-    store.$axios = mockAxios;
     vi.clearAllMocks();
   });
 
@@ -33,19 +34,19 @@ describe('compareStore', () => {
     it('fetches compare data with encoded params', async () => {
       const params = [{ type: 'log', id: 1 }];
       const mockData = { time: {}, freq: {} };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getCompare(params);
 
       const encoded = encodeURIComponent(JSON.stringify(params));
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         `/api/compare?datasets=${encoded}`,
       );
       expect(store.allCompareDashboardData).toEqual(mockData);
     });
 
     it('does not throw on API failure', async () => {
-      mockAxios.get.mockRejectedValue(new Error('fail'));
+      mockGet.mockRejectedValue(new Error('fail'));
 
       await expect(store.getCompare([]))
         .resolves.not.toThrow();
@@ -54,26 +55,26 @@ describe('compareStore', () => {
 
   describe('getStateData', () => {
     it('fetches log discover stats', async () => {
-      mockAxios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: { stats: { cases: 100 } },
       });
 
       const result = await store.getStateData('log', 1);
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/logs/1/discover',
       );
       expect(result).toEqual({ cases: 100 });
     });
 
     it('fetches filter discover stats', async () => {
-      mockAxios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: { stats: { cases: 50 } },
       });
 
       const result = await store.getStateData('filter', 3);
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/filters/3/discover',
       );
       expect(result).toEqual({ cases: 50 });
@@ -82,7 +83,7 @@ describe('compareStore', () => {
 
   describe('getFileName', () => {
     it('finds file name by id', async () => {
-      mockAxios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: [
           { id: 1, name: 'file1.csv' },
           { id: 2, name: 'file2.csv' },
@@ -95,7 +96,7 @@ describe('compareStore', () => {
     });
 
     it('returns undefined for non-existent id', async () => {
-      mockAxios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: [{ id: 1, name: 'file1.csv' }],
       });
 

tests/stores/conformance.test.js

@@ -5,21 +5,22 @@ vi.mock('@/module/apiError.js', () => ({
   default: vi.fn(),
 }));
 
+const { mockGet, mockPost, mockPut } = vi.hoisted(() => ({
+  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(),
+}));
+vi.mock('@/api/client.js', () => ({
+  default: { get: mockGet, post: mockPost, put: mockPut },
+}));
+
 import apiError from '@/module/apiError.js';
 import useConformanceStore from '@/stores/conformance.js';
 
 describe('conformanceStore', () => {
   let store;
-  const mockAxios = {
-    get: vi.fn(),
-    post: vi.fn(),
-    put: vi.fn(),
-  };
 
   beforeEach(() => {
     setActivePinia(createPinia());
     store = useConformanceStore();
-    store.$axios = mockAxios;
     vi.clearAllMocks();
   });
 
@@ -42,11 +43,11 @@ describe('conformanceStore', () => {
         waiting_time: {},
         cycle_time: {},
       };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getConformanceParams();
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/log-checks/params?log_id=1',
       );
       expect(store.allConformanceTask).toEqual([{ label: 'A' }]);
@@ -63,11 +64,11 @@ describe('conformanceStore', () => {
         waiting_time: {},
         cycle_time: {},
       };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getConformanceParams();
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/filter-checks/params?filter_id=5',
       );
     });
@@ -77,11 +78,11 @@ describe('conformanceStore', () => {
     it('posts to log temp-check and stores id', async () => {
       store.conformanceLogId = 1;
       store.conformanceFilterId = null;
-      mockAxios.post.mockResolvedValue({ data: { id: 42 } });
+      mockPost.mockResolvedValue({ data: { id: 42 } });
 
       await store.addConformanceCheckId({ rule: 'test' });
 
-      expect(mockAxios.post).toHaveBeenCalledWith(
+      expect(mockPost).toHaveBeenCalledWith(
         '/api/temp-log-checks?log_id=1',
         { rule: 'test' },
       );
@@ -90,11 +91,11 @@ describe('conformanceStore', () => {
 
     it('posts to filter temp-check when filter set', async () => {
       store.conformanceFilterId = 3;
-      mockAxios.post.mockResolvedValue({ data: { id: 99 } });
+      mockPost.mockResolvedValue({ data: { id: 99 } });
 
       await store.addConformanceCheckId({ rule: 'test' });
 
-      expect(mockAxios.post).toHaveBeenCalledWith(
+      expect(mockPost).toHaveBeenCalledWith(
         '/api/temp-filter-checks?filter_id=3',
         { rule: 'test' },
       );
@@ -106,11 +107,11 @@ describe('conformanceStore', () => {
     it('fetches temp log check report', async () => {
       store.conformanceLogTempCheckId = 10;
       const mockData = { file: {}, charts: {} };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getConformanceReport();
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/temp-log-checks/10',
       );
       expect(store.allConformanceTempReportData).toEqual(mockData);
@@ -119,7 +120,7 @@ describe('conformanceStore', () => {
     it('stores routeFile when getRouteFile=true', async () => {
       store.conformanceLogTempCheckId = 10;
       const mockData = { file: { name: 'test.csv' } };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getConformanceReport(true);
 
@@ -134,11 +135,11 @@ describe('conformanceStore', () => {
       store.conformanceFilterId = null;
       store.conformanceLogTempCheckId = 10;
       store.conformanceRuleData = { type: 'test' };
-      mockAxios.post.mockResolvedValue({ data: { id: 100 } });
+      mockPost.mockResolvedValue({ data: { id: 100 } });
 
       await store.addConformanceCreateCheckId('myRule');
 
-      expect(mockAxios.post).toHaveBeenCalledWith(
+      expect(mockPost).toHaveBeenCalledWith(
         '/api/log-checks?log_id=1',
         { name: 'myRule', rule: { type: 'test' } },
       );
@@ -151,11 +152,11 @@ describe('conformanceStore', () => {
     it('updates existing log check', async () => {
       store.conformanceLogCreateCheckId = 50;
       store.conformanceRuleData = { type: 'updated' };
-      mockAxios.put.mockResolvedValue({ status: 200 });
+      mockPut.mockResolvedValue({ status: 200 });
 
       await store.updateConformance();
 
-      expect(mockAxios.put).toHaveBeenCalledWith(
+      expect(mockPut).toHaveBeenCalledWith(
         '/api/log-checks/50',
         { type: 'updated' },
       );

tests/stores/files.test.js

@@ -21,13 +21,14 @@ vi.mock('@/router/index.ts', () => ({
   default: { push: vi.fn(), currentRoute: { value: { path: '/' } } },
 }));
 
-import axios from 'axios';
+const { mockGet, mockPost, mockPut, mockDelete } = vi.hoisted(() => ({
-import useFilesStore from '@/stores/files.js';
+  mockGet: vi.fn(), mockPost: vi.fn(), mockPut: vi.fn(), mockDelete: vi.fn(),
+}));
+vi.mock('@/api/client.js', () => ({
+  default: { get: mockGet, post: mockPost, put: mockPut, delete: mockDelete },
+}));
 
-vi.spyOn(axios, 'get').mockImplementation(vi.fn());
+import useFilesStore from '@/stores/files.js';
-vi.spyOn(axios, 'post').mockImplementation(vi.fn());
-vi.spyOn(axios, 'put').mockImplementation(vi.fn());
-vi.spyOn(axios, 'delete').mockImplementation(vi.fn());
 
 describe('filesStore', () => {
   let store;
@@ -63,7 +64,7 @@ describe('filesStore', () => {
 
   describe('fetchAllFiles', () => {
     it('fetches and transforms file data', async () => {
-      axios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: [
           {
             type: 'log',
@@ -85,7 +86,7 @@ describe('filesStore', () => {
 
       await store.fetchAllFiles();
 
-      expect(axios.get).toHaveBeenCalledWith('/api/files');
+      expect(mockGet).toHaveBeenCalledWith('/api/files');
       expect(store.allEventFiles).toHaveLength(2);
       expect(store.allEventFiles[0].fileType).toBe('Log');
       expect(store.allEventFiles[0].icon).toBe('work_history');
@@ -96,19 +97,19 @@ describe('filesStore', () => {
     });
 
     it('does not throw on API failure', async () => {
-      axios.get.mockRejectedValue(new Error('Network error'));
+      mockGet.mockRejectedValue(new Error('Network error'));
       await expect(store.fetchAllFiles()).resolves.toBeUndefined();
     });
   });
 
   describe('upload', () => {
     it('uploads file and navigates to Upload page', async () => {
-      axios.post.mockResolvedValue({ data: { id: 42 } });
+      mockPost.mockResolvedValue({ data: { id: 42 } });
       const formData = new FormData();
 
       await store.upload(formData);
 
-      expect(axios.post).toHaveBeenCalledWith(
+      expect(mockPost).toHaveBeenCalledWith(
         '/api/logs/csv-uploads',
         formData,
         expect.objectContaining({
@@ -123,25 +124,25 @@ describe('filesStore', () => {
   describe('getUploadDetail', () => {
     it('fetches upload preview', async () => {
       store.uploadId = 10;
-      axios.get.mockResolvedValue({
+      mockGet.mockResolvedValue({
         data: { preview: { columns: ['a', 'b'] } },
       });
 
       await store.getUploadDetail();
 
-      expect(axios.get).toHaveBeenCalledWith('/api/logs/csv-uploads/10');
+      expect(mockGet).toHaveBeenCalledWith('/api/logs/csv-uploads/10');
       expect(store.allUploadDetail).toEqual({ columns: ['a', 'b'] });
     });
   });
 
   describe('rename', () => {
     it('renames a log file', async () => {
-      axios.put.mockResolvedValue({});
+      mockPut.mockResolvedValue({});
-      axios.get.mockResolvedValue({ data: [] });
+      mockGet.mockResolvedValue({ data: [] });
 
       await store.rename('log', 5, 'new-name');
 
-      expect(axios.put).toHaveBeenCalledWith('/api/logs/5/name', {
+      expect(mockPut).toHaveBeenCalledWith('/api/logs/5/name', {
         name: 'new-name',
       });
     });
@@ -149,30 +150,30 @@ describe('filesStore', () => {
 
   describe('getDependents', () => {
     it('fetches dependents for a log', async () => {
-      axios.get.mockResolvedValue({ data: [{ id: 1 }, { id: 2 }] });
+      mockGet.mockResolvedValue({ data: [{ id: 1 }, { id: 2 }] });
 
       await store.getDependents('log', 7);
 
-      expect(axios.get).toHaveBeenCalledWith('/api/logs/7/dependents');
+      expect(mockGet).toHaveBeenCalledWith('/api/logs/7/dependents');
       expect(store.allDependentsData).toEqual([{ id: 1 }, { id: 2 }]);
     });
   });
 
   describe('deleteFile', () => {
-    it('calls axios.delete before fetchAllFiles', async () => {
+    it('calls mockDelete before fetchAllFiles', async () => {
       const callOrder = [];
-      axios.delete.mockImplementation(async () => {
+      mockDelete.mockImplementation(async () => {
         callOrder.push('delete');
         return {};
       });
-      axios.get.mockImplementation(async () => {
+      mockGet.mockImplementation(async () => {
         callOrder.push('get');
         return { data: [] };
       });
 
       await store.deleteFile('log', 1);
 
-      expect(axios.delete).toHaveBeenCalledWith('/api/logs/1');
+      expect(mockDelete).toHaveBeenCalledWith('/api/logs/1');
       expect(callOrder.indexOf('delete')).toBeLessThan(
         callOrder.indexOf('get'),
       );
@@ -183,37 +184,37 @@ describe('filesStore', () => {
         store.deleteFile('log', null),
       ).resolves.toBeUndefined();
 
-      expect(axios.delete).not.toHaveBeenCalled();
+      expect(mockDelete).not.toHaveBeenCalled();
     });
   });
 
   describe('deletionRecord', () => {
     it('deletes a deletion record', async () => {
-      axios.delete.mockResolvedValue({});
+      mockDelete.mockResolvedValue({});
 
       await store.deletionRecord(5);
 
-      expect(axios.delete).toHaveBeenCalledWith('/api/deletion/5');
+      expect(mockDelete).toHaveBeenCalledWith('/api/deletion/5');
     });
   });
 
   describe('downloadFileCSV', () => {
     it('downloads CSV for a log', async () => {
-      axios.get.mockResolvedValue({ data: 'col1,col2\na,b' });
+      mockGet.mockResolvedValue({ data: 'col1,col2\na,b' });
 
       window.URL.createObjectURL = vi.fn().mockReturnValue('blob:test');
       window.URL.revokeObjectURL = vi.fn();
 
       await store.downloadFileCSV('log', 3, 'my-file');
 
-      expect(axios.get).toHaveBeenCalledWith('/api/logs/3/csv');
+      expect(mockGet).toHaveBeenCalledWith('/api/logs/3/csv');
       expect(window.URL.revokeObjectURL).toHaveBeenCalledWith('blob:test');
     });
 
     it('returns early for unsupported type', async () => {
       await store.downloadFileCSV('log-check', 3, 'file');
 
-      expect(axios.get).not.toHaveBeenCalled();
+      expect(mockGet).not.toHaveBeenCalled();
     });
   });
 });

tests/stores/login.test.js

@@ -7,11 +7,16 @@ vi.mock('@/module/apiError.js', () => ({
 }));
 
 import axios from 'axios';
+
+const { mockClientGet } = vi.hoisted(() => ({ mockClientGet: vi.fn() }));
+vi.mock('@/api/client.js', () => ({
+  default: { get: mockClientGet },
+}));
+
 import useLoginStore from '@/stores/login.ts';
 
-// Mock axios methods
+// Mock axios methods (used for signIn/refreshToken which call plain axios)
 vi.spyOn(axios, 'post').mockImplementation(vi.fn());
-vi.spyOn(axios, 'get').mockImplementation(vi.fn());
 
 describe('loginStore', () => {
   let store;
@@ -118,13 +123,13 @@ describe('loginStore', () => {
 
   describe('getUserData', () => {
     it('stores user data on success', async () => {
-      axios.get.mockResolvedValue({
+      mockClientGet.mockResolvedValue({
         data: { username: 'testuser', name: 'Test User' },
       });
 
       await store.getUserData();
 
-      expect(axios.get).toHaveBeenCalledWith('/api/my-account');
+      expect(mockClientGet).toHaveBeenCalledWith('/api/my-account');
       expect(store.userData).toEqual({
         username: 'testuser',
         name: 'Test User',
@@ -134,7 +139,7 @@ describe('loginStore', () => {
 
   describe('checkLogin', () => {
     it('does not redirect on success', async () => {
-      axios.get.mockResolvedValue({ data: {} });
+      mockClientGet.mockResolvedValue({ data: {} });
 
       await store.checkLogin();
 
@@ -142,7 +147,7 @@ describe('loginStore', () => {
     });
 
     it('redirects to login on error', async () => {
-      axios.get.mockRejectedValue(new Error('401'));
+      mockClientGet.mockRejectedValue(new Error('401'));
 
       await store.checkLogin();
 
@@ -186,10 +191,6 @@ describe('loginStore', () => {
         }),
       );
 
-      // Should update axios default Authorization header
-      expect(axios.defaults.headers.common['Authorization'])
-        .toBe('Bearer new-access-token');
-
       // Verify cookies were set with Secure flag
       const cookieSetter = vi.spyOn(document, 'cookie', 'set');
       vi.clearAllMocks();

tests/stores/performance.test.js

@@ -5,18 +5,19 @@ vi.mock('@/module/apiError.js', () => ({
   default: vi.fn(),
 }));
 
+const { mockGet } = vi.hoisted(() => ({ mockGet: vi.fn() }));
+vi.mock('@/api/client.js', () => ({
+  default: { get: mockGet },
+}));
+
 import usePerformanceStore from '@/stores/performance.js';
 
 describe('performanceStore', () => {
   let store;
-  const mockAxios = {
-    get: vi.fn(),
-  };
 
   beforeEach(() => {
     setActivePinia(createPinia());
     store = usePerformanceStore();
-    store.$axios = mockAxios;
     vi.clearAllMocks();
   });
 
@@ -33,28 +34,28 @@ describe('performanceStore', () => {
   describe('getPerformance', () => {
     it('fetches log performance data', async () => {
       const mockData = { time: { charts: [] }, freq: { charts: [] } };
-      mockAxios.get.mockResolvedValue({ data: mockData });
+      mockGet.mockResolvedValue({ data: mockData });
 
       await store.getPerformance('log', 1);
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/logs/1/performance',
       );
       expect(store.allPerformanceData).toEqual(mockData);
     });
 
     it('fetches filter performance data', async () => {
-      mockAxios.get.mockResolvedValue({ data: { time: {} } });
+      mockGet.mockResolvedValue({ data: { time: {} } });
 
       await store.getPerformance('filter', 5);
 
-      expect(mockAxios.get).toHaveBeenCalledWith(
+      expect(mockGet).toHaveBeenCalledWith(
         '/api/filters/5/performance',
       );
     });
 
     it('does not throw on API failure', async () => {
-      mockAxios.get.mockRejectedValue(new Error('Network error'));
+      mockGet.mockRejectedValue(new Error('Network error'));
 
       // Should not throw - apiError handles it
       await expect(store.getPerformance('log', 1))