main layout

src/App.vue

@@ -1,9 +1,32 @@
+<template>
+  <Header @contextmenu.prevent />
+  <div class="grow overflow-x-hidden overflow-y-auto p-2 md:p-4" @contextmenu.prevent>
+    <RouterView />
+  </div>
+  <Footer @contextmenu.prevent />
+</template>
+
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
+import { defineComponent } from "vue";
+import { RouterView } from "vue-router";
+import Header from "./components/Header.vue";
+import Footer from "./components/Footer.vue";
+import { mapState } from "pinia";
+import { useAuthStore } from "./stores/auth";
+import { isAuthenticatedPromise } from "./router/authGuards";
 </script>
 
-<template>
-  <header>Header</header>
-
-  <RouterView />
-</template>
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useAuthStore, ["authCheck"]),
+  },
+  mounted() {
+    if (!this.authCheck && localStorage.getItem("access_token")) {
+      isAuthenticatedPromise().catch(() => {
+        localStorage.removeItem("access_token");
+      });
+    }
+  },
+});
+</script>