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 { OpenAPI } from "@/client";
import { environment } from "@/environment";
import axios from "axios";
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";

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(() => {
  OpenAPI.BASE = environment.API_BASE_URL;
  userRepository.updateJWT(cookies.get("clowm-jwt"));
  if (userRepository.authenticated) {
    userRepository.getCurrentUser();
  }
  axios.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 ? "token_invalid" : "token_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]);
    window._paq.push(["setCustomUrl", to.path]);
    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-4 flex-grow-1 py-2">
    <router-view></router-view>
  </div>
  <AppFooter />
</template>

<style scoped></style>