From 946fabfa937938ad6f5ed06c810247e50df5ac33 Mon Sep 17 00:00:00 2001 From: chiayin Date: Mon, 16 Oct 2023 18:38:20 +0800 Subject: [PATCH] Issue #140: --- src/module/apiError.js | 31 +++++++++++++ src/router/index.js | 4 -- src/stores/allMapData.js | 96 ++++----------------------------------- src/stores/conformance.js | 65 ++++---------------------- src/stores/files.js | 30 ++---------- src/stores/login.js | 46 +++++++------------ 6 files changed, 68 insertions(+), 204 deletions(-) create mode 100644 src/module/apiError.js diff --git a/src/module/apiError.js b/src/module/apiError.js new file mode 100644 index 0000000..e61bc8c --- /dev/null +++ b/src/module/apiError.js @@ -0,0 +1,31 @@ +import router from "@/router/index.js"; +import loadingStore from '@/stores/loading.js'; +import pinia from '@/stores/main.js' +import {useToast} from 'vue-toast-notification'; +import 'vue-toast-notification/dist/theme-sugar.css'; +import axios from "axios"; + +const loading = loadingStore(pinia); +const $toast = useToast(); +// Delay loading and toast +const delay = (s = 0) => new Promise((resolve, reject) => setTimeout(resolve, s)); + +/** + * API catch error function + * @param {object} Error + * @param {string} toastMessage + * @returns {string} Error HTTP Status + */ +export default async function apiError(error, toastMessage) { + if(error?.request.status === 401) { + delete axios.defaults.headers.common["Authorization"]; + document.cookie = 'luciaToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC;'; + return router.push('/login'); + } + await delay(); + loading.isLoading = true; + await delay(1000); + loading.isLoading = false; + await delay(500); + $toast.default(toastMessage, {position: 'bottom'}); +} diff --git a/src/router/index.js b/src/router/index.js index 1241726..1410adf 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -82,10 +82,6 @@ router.beforeEach((to, from) => { // from: Route: 當前導航正要離開的路由 let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken=')); // 是否登入 - // 需要驗證登入的頁面，判斷有無登入，無登入要轉址 login - if(to.meta.requiresAuth) { - if (!isCookie) router.push({ name: 'Login' }); - } // 當路由到 login 時，有登入要跳轉至home if (to.name === 'Login') { if (isCookie) router.push({ name: 'Files' }); diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js index 18efe91..9fce240 100644 --- a/src/stores/allMapData.js +++ b/src/stores/allMapData.js @@ -1,14 +1,6 @@ import { defineStore } from "pinia"; -import loadingStore from './loading.js'; -import pinia from '@/stores/main.js' -import {useToast} from 'vue-toast-notification'; -import 'vue-toast-notification/dist/theme-sugar.css'; import moment from "moment"; - -const loading = loadingStore(pinia); -const $toast = useToast(); -// Delay loading and toast 待模組化 -let delay = (s = 0) => new Promise((resolve, reject) => setTimeout(resolve, s)); +import apiError from '@/module/apiError.js'; export default defineStore('allMapDataStore', { state: () => ({ @@ -29,7 +21,6 @@ export default defineStore('allMapDataStore', { allFilterEndToStart: [], allFilterTimeframe: {}, allFilterTrace: [], - httpStatus: 200, hasResultRule: null, // click Apply 後檢查是否有 Data temporaryData: [], // 沒被 apply all 的 Data postRuleData: [], // has-result API & temp-filters API 的 Data @@ -109,16 +100,8 @@ export default defineStore('allMapDataStore', { this.allBpmn = response.data.bpmn; this.allStats = response.data.stats; this.allInsights = response.data.insights; - - // if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to load the Map.',{position: 'bottom'}); + apiError(error, 'Failed to load the Map.'); }; }, /** @@ -139,15 +122,8 @@ export default defineStore('allMapDataStore', { const response = await this.$axios.get(api); this.allTrace = response.data; - // if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to load the Trace.',{position: 'bottom'}); + apiError(error, 'Failed to load the Trace.'); } }, /** @@ -177,19 +153,9 @@ export default defineStore('allMapDataStore', { return this.allCase; }); return this.allCase; - - // if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { if(error.response.status === 404) this.infinite404 = 404; - else { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to load the Trace Detail.',{position: 'bottom'}); - } + apiError(error, 'Failed to load the Trace Detail.'); }; }, /** @@ -206,16 +172,8 @@ export default defineStore('allMapDataStore', { this.allFilterEndToStart = response.data.sinks; this.allFilterTimeframe = response.data.timeframe; this.allFilterTrace = response.data.trace; - - // if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to load the Filter Parameters.',{position: 'bottom'}); + apiError(error, 'Failed to load the Filter Parameters.'); }; }, /** @@ -228,16 +186,8 @@ export default defineStore('allMapDataStore', { try { const response = await this.$axios.post(api, this.postRuleData) this.hasResultRule = response.data.result; - - // if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to load the Has Result.',{position: 'bottom'}); + apiError(error, 'Failed to load the Has Result.'); }; }, /** @@ -250,16 +200,8 @@ export default defineStore('allMapDataStore', { try { const response = await this.$axios.post(api, this.postRuleData) this.tempFilterId = response.data.id; - - // if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to add the Temporary Filters.',{position: 'bottom'}); + apiError(error, 'Failed to add the Temporary Filters.'); }; }, /** @@ -278,13 +220,7 @@ export default defineStore('allMapDataStore', { this.createFilterId = response.data.id; this.tempFilterId = null; }catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to load the Filters.',{position: 'bottom'}); + apiError(error, 'Failed to load the Filters.'); }; }, /** @@ -300,13 +236,7 @@ export default defineStore('allMapDataStore', { this.logId = response.data.log.id; this.filterName = response.data.name; }catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to get Filter Detail.',{position: 'bottom'}); + apiError(error, 'Failed to get Filter Detail.'); } } }, @@ -322,13 +252,7 @@ export default defineStore('allMapDataStore', { const response = await this.$axios.put(api, data); this.isUpdataFilter = response.status === 200; }catch(error) { - this.httpStatus = error.request.status; - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to updata an Existing Filter.',{position: 'bottom'}); + apiError(error, 'Failed to updata an Existing Filter.'); } }, }, diff --git a/src/stores/conformance.js b/src/stores/conformance.js index 67e229e..75c2300 100644 --- a/src/stores/conformance.js +++ b/src/stores/conformance.js @@ -1,17 +1,8 @@ import { defineStore } from "pinia"; -import loadingStore from "./loading"; -import pinia from '@/stores/main.js'; -import {useToast} from 'vue-toast-notification'; -import 'vue-toast-notification/dist/theme-sugar.css'; import moment from "moment"; import { Decimal } from 'decimal.js'; import abbreviateNumber from '@/module/abbreviateNumber.js'; - -const loading = loadingStore(pinia); -const $toast = useToast(); - -// Delay loading and toast 待模組化 -let delay = (s = 0) => new Promise((resolve, reject) => setTimeout(resolve, s)); +import apiError from '@/module/apiError.js'; export default defineStore('conformanceStore', { state: () => ({ @@ -199,12 +190,7 @@ export default defineStore('conformanceStore', { this.allWaitingTime = response.data.waiting_time; this.allCycleTime = response.data.cycle_time; } catch(error) { - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to load the Conformance Parameters.',{position: 'bottom'}); + apiError(error, 'Failed to load the Conformance Parameters.'); } }, /** @@ -218,12 +204,7 @@ export default defineStore('conformanceStore', { const response = await this.$axios.post(api, data); this.conformanceTempCheckId = response.data.id; } catch(error) { - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to add the Temporary Check for a log.',{position: 'bottom'}); + apiError(error, 'Failed to add the Temporary Check for a log.'); } }, /** @@ -237,13 +218,7 @@ export default defineStore('conformanceStore', { const response = await this.$axios.get(api); this.allConformanceTempReportData = response.data; } catch(error) { - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to Get the Temporary Log Conformance Report.',{position: 'bottom'}); - + apiError(error, 'Failed to Get the Temporary Log Conformance Report.'); } }, /** @@ -257,12 +232,7 @@ export default defineStore('conformanceStore', { const response = await this.$axios.get(api); this.allIssueTraces = response.data.traces; } catch(error) { - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to Get the detail of a temporary log conformance issue.',{position: 'bottom'}); + apiError(error, 'Failed to Get the detail of a temporary log conformance issue.'); }; }, /** @@ -279,14 +249,7 @@ export default defineStore('conformanceStore', { return response.data.cases; } catch(error) { if(error.response.status === 404) this.infinite404 = 404; - else { - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to Get the detail of a temporary log conformance issue.',{position: 'bottom'}); - }; + apiError(error, 'Failed to Get the detail of a temporary log conformance issue.'); }; }, /** @@ -300,12 +263,7 @@ export default defineStore('conformanceStore', { const response = await this.$axios.get(api); this.allLoopTraces = response.data.traces; } catch(error) { - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to Get the detail of a temporary log conformance loop.',{position: 'bottom'}); + apiError(error, 'Failed to Get the detail of a temporary log conformance loop.'); }; }, /** @@ -322,14 +280,7 @@ export default defineStore('conformanceStore', { return response.data.cases; } catch(error) { if(error.response.status === 404) this.infinite404 = 404; - else { - await delay(); - loading.isLoading = true; - await delay(1000); - loading.isLoading = false; - await delay(500); - $toast.default('Failed to Get the detail of a temporary log conformance loop.',{position: 'bottom'}); - }; + apiError(error, 'Failed to Get the detail of a temporary log conformance loop.'); }; }, }, diff --git a/src/stores/files.js b/src/stores/files.js index fb78d82..71a0dc7 100644 --- a/src/stores/files.js +++ b/src/stores/files.js @@ -3,13 +3,9 @@ import loadingStore from './loading.js'; import pinia from '@/stores/main.js' import axios from "axios"; import moment from 'moment'; -import {useToast} from 'vue-toast-notification'; -import 'vue-toast-notification/dist/theme-sugar.css'; +import apiError from '@/module/apiError.js'; const loading = loadingStore(pinia); -const $toast = useToast(); -// Delay loading and toast 待模組化 -let delay = s => new Promise((resolve, reject) => setTimeout(resolve, s)); export default defineStore('filesStore', { state: () => ({ @@ -75,17 +71,7 @@ export default defineStore('filesStore', { }) if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { - console.dir(error); // safari 測試 - this.httpStatus = error.request.status; - delay().then(() =>{ - loading.isLoading = true; - return delay(1000); - }).then(()=>{ - loading.isLoading = false; - return delay(500); - }).then(() => { - $toast.default('Failed to load the logs.',{position: 'bottom'}); - }) + apiError(error, 'Failed to load the logs.'); }; }, /** @@ -108,17 +94,7 @@ export default defineStore('filesStore', { }); if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { - console.dir(error); // safari 測試 - this.httpStatus = error.request.status; - delay().then(() =>{ - loading.isLoading = true; - return delay(1000); - }).then(()=>{ - loading.isLoading = false; - return delay(500); - }).then(() => { - $toast.default('Failed to load the filters.',{position: 'bottom'}); - }) + apiError(error, 'Failed to load the filters.'); }; }, // fetchRule(){o.icon = local_police} diff --git a/src/stores/login.js b/src/stores/login.js index f2254d9..103c77e 100644 --- a/src/stores/login.js +++ b/src/stores/login.js @@ -1,5 +1,6 @@ import { defineStore } from "pinia"; import axios from 'axios'; +import apiError from '@/module/apiError.js'; export default defineStore('loginStore', { // data, methods, computed @@ -12,11 +13,6 @@ export default defineStore('loginStore', { isInvalid: false, userData: {}, }), - - // 讓元件取用相關的資料狀態 - getters: { - }, - actions: { /** * fetch Login For Access Token api @@ -32,23 +28,18 @@ export default defineStore('loginStore', { try { const response = await axios.post(api, this.auth, config); - - if(response.status === 200){ - // 將 token 儲存在 cookie - const token = response.data.access_token; - // 取得當前日期 - const currentDate = new Date(); - // 設定 cookie 的過期日期為一天後 - const expirationDate = new Date(); - expirationDate.setDate(currentDate.getDate() + 1); - // 格式化過期日期為 Cookie 格式 - const expires = expirationDate.toUTCString(); - - document.cookie = `luciaToken=${token}; expires=${expires};`; - this.$router.push('/files'); - } + const token = response.data.access_token; + // 將 token 儲存在 cookie + document.cookie = `luciaToken=${token};`; + // // 取得當前日期 + // const currentDate = new Date(); + // // 設定 cookie 的過期日期為一天後 + // const expirationDate = new Date(); + // expirationDate.setDate(currentDate.getDate() + 1); + // // 格式化過期日期為 Cookie 格式 + // const expires = expirationDate.toUTCString(); + this.$router.push('/files'); } catch(error) { - console.dir(error); // safari 測試 this.isInvalid = true; }; }, @@ -56,11 +47,8 @@ export default defineStore('loginStore', { * Logout, tooken expired */ logOut() { - let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken=')); - let expires = new Date(); - expires.setTime(expires.getTime() - 60000); - - if(isCookie) document.cookie = `luciaToken=; expires=${expires.toGMTString()}`; + delete axios.defaults.headers.common["Authorization"]; + document.cookie = 'luciaToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC;'; this.$router.push('/login'); }, /** @@ -74,7 +62,7 @@ export default defineStore('loginStore', { this.userData = response.data; } catch(error) { - console.dir(error); // safari 測試 + apiError(error, 'Failed to load the Map.'); }; }, /** @@ -85,11 +73,9 @@ export default defineStore('loginStore', { try { const response = await axios.get(api); - if(response.status !== 200) this.$router.push('/login'); } catch(error) { - console.dir(error); // safari 測試 this.$router.push('/login'); }; }, } -}) +});