From 5bf98a1b74ab7da85df3d38da43e1c9c770acdd5 Mon Sep 17 00:00:00 2001 From: Cindy Chang Date: Fri, 14 Jun 2024 16:17:20 +0800 Subject: [PATCH] WIP #216. The timing is not good. After user password is confirmed, the isLoggedIn boolean is still false, and thus causing the website to stay at the login page --- src/stores/login.js | 3 ++- src/views/Login/index.vue | 2 +- src/views/MainContainer.vue | 20 +++++++++++++++++++- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/stores/login.js b/src/stores/login.js index 83c874f..0e9fc6c 100644 --- a/src/stores/login.js +++ b/src/stores/login.js @@ -45,7 +45,8 @@ export default defineStore('loginStore', { // 然而有一種情況是使用者在沒有登入的情況下貼上了某一個頁面的網址, // 則在此情況下時,我們會在使用者稍後登入後,把使用者帶到剛才記住的 return-to 網址 if(this.rememberedReturnToUrl !== "") { - window.location.href = atob(this.rememberedReturnToUrl); + const decodedUrl = atob(this.rememberedReturnToUrl); + window.location.href = decodedUrl; } else { this.$router.push('/files'); } diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue index 5dff2bd..75dc8a8 100644 --- a/src/views/Login/index.vue +++ b/src/views/Login/index.vue @@ -107,7 +107,7 @@ export default { // 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器 // btoa: 對字串進行 Base64 編碼 if(this.$route.query['return-to']) { - this.setRememberedReturnToUrl(btoa(this.$route.query['return-to'])); + this.setRememberedReturnToUrl(this.$route.query['return-to']); } }, }; diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue index 1f6de5c..198fa2b 100644 --- a/src/views/MainContainer.vue +++ b/src/views/MainContainer.vue @@ -19,6 +19,7 @@ import Navbar from "@/components/Navbar.vue"; import Loading from '@/components/Loading.vue'; import { leaveFilter, leaveConformance } from '@/module/alertModal.js'; import PageAdminStore from '@/stores/pageAdmin.js'; +import LoginStore from "@/stores/login.js"; export default { name: 'MainContainer', @@ -46,6 +47,9 @@ export default { 'shouldKeepPreviousPage', 'activePageComputedByRoute' ]), + ...mapState(LoginStore, [ + 'isLoggedIn', + ]) }, methods: { ...mapActions(PageAdminStore, [ @@ -60,7 +64,21 @@ export default { const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1"); this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`; }, - // Rember, Swal modal handling is called before beforeRouteUpdate + beforeRouteEnter(to, from, next) { + // 重新整理畫面以及第一次進入網頁時,beforeRouteEnter這個hook會被執行,然而beforeRouteUpdate不會被執行 + const loginStore = LoginStore(); + if (!loginStore.isLoggedIn) { + next({ + path: '/login', + query: { + 'return-to': btoa(window.location.href), + } + }); + } else { + next(); + } + }, + // Remember, Swal modal handling is called before beforeRouteUpdate beforeRouteUpdate(to, from, next) { // console.log("beforeRouteUpdate", from.name, "to:", to.name); this.setPrevioiusPage(from.name);