App.vue

<script setup lang="ts">
import { onBeforeMount, onMounted } from "vue";
import { useCookies } from "vue3-cookies";
import { useUserStore } from "@/stores/users";
import { useRoute, useRouter } from "vue-router";
import { client } from "@/client/services.gen";
import { environment } from "@/environment";
import { useNameStore } from "@/stores/names";
import AppHeader from "@/components/AppHeader.vue";
import AppFooter from "@/components/AppFooter.vue";
import { useResourceStore } from "@/stores/resources";
import { useWorkflowStore } from "@/stores/workflows";
import { useBucketStore } from "@/stores/buckets";
import { useS3KeyStore } from "@/stores/s3keys";
import { stringify as param_stringify } from "qs";

const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const userRepository = useUserStore();
const nameRepository = useNameStore();
const resourceRepository = useResourceStore();
const workflowRepository = useWorkflowStore();
const bucketRepository = useBucketStore();
const s3KeyRepository = useS3KeyStore();

onBeforeMount(() => {
  client.setConfig({
    baseURL: environment.API_BASE_URL,
    paramsSerializer: (params) =>
      param_stringify(params, { arrayFormat: "repeat" }),
  });
  userRepository.updateJWT(cookies.get("clowm-jwt"));
  if (userRepository.authenticated) {
    userRepository.getCurrentUser();
  }
  client.instance.interceptors.response.use(
    (res) => res,
    (err) => {
      if (
        err.response.status === 401 ||
        (err.response.status === 400 &&
          err.response.data.detail?.includes("JWT"))
      ) {
        userRepository.logout();
        router.push({
          name: "login",
          query: {
            login_error:
              err.response.status === 401
                ? "session token invalid"
                : "session expired",
            next: route.name !== "login" ? encodeURI(route.path) : undefined,
          },
        });
      }
      return Promise.reject(err);
    },
  );
  router.afterEach((to, from) => {
    window._paq.push(["setReferrerUrl", from.path]);
    window._paq.push(["deleteCustomVariables", "page"]);
    window._paq.push(["deleteCustomDimension", 1]);
    const mtm_query_keys = Object.keys(to.query ?? {}).filter((key) =>
      key.startsWith("mtm_"),
    );
    const mtm_query =
      mtm_query_keys.length > 0
        ? mtm_query_keys
            .slice(1)
            .reduce(
              (prev, cur) => prev + `&${cur}=${to.query[cur]}`,
              `?${mtm_query_keys[0]}=${to.query[mtm_query_keys[0]]}`,
            )
        : "";
    window._paq.push(["setCustomUrl", to.path + mtm_query]);
    window._paq.push(["setDocumentTitle", to.name]);
    if (userRepository.currentUID.length > 0) {
      window._paq.push(["setUserId", userRepository.currentUID]);
    }
    window._paq.push(["trackPageView"]);
    window._paq.push(["enableLinkTracking"]);
  });
  router.beforeEach(async (to) => {
    // make sure the user is authenticated
    if (to.meta.public) {
      return;
    }
    if (
      !userRepository.authenticated &&
      // ❗️ Avoid an infinite redirect
      to.name !== "login"
    ) {
      // redirect the user to the login page and preserve query params for login error message
      return {
        name: "login",
        query: { ...to.query, next: encodeURI(to.path) },
      };
    } else if (
      to.meta.requiresDeveloperRole &&
      !(userRepository.workflowDev || userRepository.admin)
    ) {
      return { name: "workflows" };
    } else if (
      to.meta.requiresReviewerRole &&
      !(userRepository.reviewer || userRepository.admin)
    ) {
      return "/";
    } else if (
      to.meta.requiresMaintainerRole &&
      !(userRepository.resourceMaintainer || userRepository.admin)
    ) {
      return { name: "resources" };
    } else if (to.meta.adminRole && !userRepository.admin) {
      return "/";
    } else if (to.name !== "login" && to.query.next) {
      // return to original path after login
      return { path: decodeURI(to.query.next as string) };
    }
  });
  nameRepository.loadNameMapping();
});

onMounted(() => {
  if (userRepository.authenticated) {
    resourceRepository.fetchPublicResources();
    workflowRepository.fetchWorkflows();
    bucketRepository.fetchOwnBuckets();
    s3KeyRepository.fetchS3Keys();
    if (!userRepository.foreignUser) {
      bucketRepository.fetchOwnPermissions();
    }
    if (userRepository.workflowDev || userRepository.admin) {
      workflowRepository.fetchOwnWorkflows();
    }
    if (userRepository.resourceMaintainer || userRepository.admin) {
      resourceRepository.fetchOwnResources();
    }
  }
});
</script>

<template>
  <AppHeader />
  <div class="container-xxl mt-2 flex-grow-1 py-2">
    <router-view></router-view>
  </div>
  <AppFooter />
</template>

<style scoped></style>