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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-06 12:44:33 +08:00
parent 6af7253d08
commit 147b16ca34
29 changed files with 301 additions and 270 deletions

View File

@@ -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;

View File

@@ -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) {

View File

@@ -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;

View File

@@ -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;

View File

@@ -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);

View File

@@ -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";
@@ -51,7 +52,7 @@ export default defineStore('loginStore', {
window.location.href = decodedUrl;
} else {
this.$router.push('/files');
}
}
} catch(error) {
this.isInvalid = true;
};
@@ -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');
};

View File

@@ -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.');