lucia-frontend/src/views/MainContainer.vue

<template>
  <ModalContainer/>
  <header id='header_inside_maincontainer' class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10">
      <Header/>
      <Navbar/>
  </header>
  <main id='loading_and_router_view_container_in_maincontainer' class="w-full">
    <Loading v-if="loadingStore.isLoading" />    
    <router-view></router-view>
  </main>
</template>

<script lang='ts'>
import { onBeforeMount, } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs, mapActions, mapState, } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
import Header from "@/components/Header.vue";
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";
import { getCookie, setCookie } from "@/utils/cookieUtil.js";
import ModalContainer from './AccountManagement/ModalContainer.vue';

export default {
  name: 'MainContainer',
  setup() {
    const loadingStore = LoadingStore();
    const allMapDataStore = AllMapDataStore();
    const conformanceStore = ConformanceStore();
    const pageAdminStore = PageAdminStore();
    const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
    const {  conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
    const router = useRouter();
    const setHighlightedNavItemOnLanding = () => {
      const currentPath = router.currentRoute.value.path;
      const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
      if(pathSegments.length === 1) {
        if(pathSegments[0] === 'files') {
          pageAdminStore.setActivePage('ALL');
        }
      } else if (pathSegments.length > 1){
        pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
      }
    };

    onBeforeMount(() => {
      setHighlightedNavItemOnLanding();
    });
    return {
      loadingStore, temporaryData, tempFilterId,
      createFilterId, postRuleData, ruleData,
      conformanceLogTempCheckId, conformanceFilterTempCheckId,
      allMapDataStore, conformanceStore,
    };
  },
  components: {
    Header,
    Navbar,
    Loading,
    ModalContainer,
  },
  computed: {
    ...mapState(PageAdminStore, [
      'shouldKeepPreviousPage',
      'activePageComputedByRoute'
    ]),
    ...mapState(LoginStore, [
      'isLoggedIn',
      'auth',
    ])
  },
  methods: {
    ...mapActions(PageAdminStore, [
      'copyPendingPageToActivePage',
      'setPreviousPage',
      'clearShouldKeepPreviousPageBoolean',
      'setActivePageComputedByRoute',
    ],),
    ...mapActions(LoginStore, [
      'refreshToken',
    ],),
  },
  // 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
    // PSEUDOCODE
    // if (not logged in) {
    //   if (has refresh token) {
    //     refresh_token();
    //     if (refresh failed) {
    //       go to log in();
    //     } else {
    //       cookie add("refresh_token=" + refresh_token "; expire=****")
    //     }
    //   } else {
    //     go to log in();
    //   }
    // }
  async beforeRouteEnter(to, from, next) {
    const loginStore = LoginStore();
   
    if (!getCookie("isLuciaLoggedIn")) {  //這裡不要用pinia的isLoggedIn來檢查，因為會有重新整理時撈不到Persisted value的值的bug
      if (getCookie('luciaRefreshToken')) {
        try {
          await loginStore.refreshToken();
          loginStore.setIsLoggedIn(true);
          setCookie("isLuciaLoggedIn", "true");
          next();
        } catch(error) {
          next({
            path: '/login',
            query: {
              'return-to': btoa(window.location.href),
            }
          });
        }
      } else {
        next({
          path: '/login',
          query: {
            // 記憶未來登入後要進入的網址，且記憶的時候要用base64編碼包裹住
            'return-to': btoa(window.location.href),
          }
        });
      }
    } else {    
      next();
    }
  },
  // Remember, Swal modal handling is called before beforeRouteUpdate
  beforeRouteUpdate(to, from, next) {
    this.setPreviousPage(from.name);

    // 離開 Map 頁時判斷是否有無資料和需要存檔
    if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
      // 傳給 Map，通知 Sidebar 要關閉。
      this.$emitter.emit('leaveFilter', false);
      leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
    } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') 
        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
      leaveConformance(next, this.conformanceStore.addConformanceCreateCheckId, to.path);
    } else if(this.shouldKeepPreviousPage) {
      // pass on and reset boolean for future use
      this.clearShouldKeepPreviousPageBoolean();
    } else {
      // most cases go this road

      // In this else block:
      // for those pages who don't need popup modals, we handle page administration right now.
      // By calling the following code, we decide the next visiting page.
      // 在這個 else 區塊中：
      // 對於那些不需要彈窗的頁面，我們現在就處理頁面管理。
      // 透過呼叫以下代碼，我們決定出下一個將要走訪的頁面。
      this.copyPendingPageToActivePage();
      next();
    }
  },
};
</script>