App.vue

<script setup lang="ts">
import NavbarTop from "@/components/NavbarTop.vue";
import { onBeforeMount } from "vue";
import { useCookies } from "vue3-cookies";
import { useAuthStore } from "@/stores/users";
import { useRouter } from "vue-router";
import { OpenAPI as S3ProxyOpenAPI } from "@/client/s3proxy";
import { OpenAPI as AuthOpenAPI } from "@/client/auth";
import { OpenAPI as WorkflowOpenAPI } from "@/client/workflow";
import { environment } from "@/environment";
import FooterBottom from "@/components/FooterBottom.vue";
import axios from "axios";

const { cookies } = useCookies();
const store = useAuthStore();
const router = useRouter();

onBeforeMount(() => {
  S3ProxyOpenAPI.BASE = environment.S3PROXY_API_BASE_URL;
  AuthOpenAPI.BASE = environment.AUTH_API_BASE_URL;
  WorkflowOpenAPI.BASE = environment.WORKFLOW_API_BASE_URL;
  axios.interceptors.response.use(
    (res) => res,
    (err) => {
      if (
        (err.response.status === 400 || err.response.status === 403) &&
        err.response.data.detail?.includes("JWT")
      ) {
        store.logout();
        cookies.remove("bearer");
        router.push({
          name: "login",
          query: {
            login_error:
              err.response.status === 400 ? "token_invalid" : "token_expired",
          },
        });
      }
      return Promise.reject(err);
    },
  );
  store.setToken(cookies.get("bearer"));
  router.beforeEach(async (to) => {
    // make sure the user is authenticated
    if (
      !store.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 };
    } else if (
      to.meta.requiresDeveloperRole &&
      !(store.workflowDev || store.admin)
    ) {
      return { name: "dashboard" };
    } else if (
      to.meta.requiresReviewerRole &&
      !(store.workflowReviewer || store.admin)
    ) {
      return { name: "dashboard" };
    }
  });
});
</script>

<template>
  <NavbarTop />
  <div class="container-xxl mt-4 flex-grow-1">
    <router-view></router-view>
  </div>
  <FooterBottom />
</template>

<style scoped></style>