use auth middleware

frontend/layouts/default.vue

@@ -1,10 +1,70 @@
-<script setup lang="ts"></script>
 <template>
   <div>
     <AppToast />
     <AppHeader />
-    <main class="p-8 dark:bg-gray-800 dark:text-white bg-white text-gray-800 min-h-screen">
+    <main>
       <slot></slot>
     </main>
   </div>
 </template>
+
+<script lang="ts" setup>
+  import { useItemStore } from "~~/stores/items";
+  import { useLabelStore } from "~~/stores/labels";
+  import { useLocationStore } from "~~/stores/locations";
+
+  /**
+   * Store Provider Initialization
+   */
+
+  const labelStore = useLabelStore();
+  const reLabel = /\/api\/v1\/labels\/.*/gm;
+  const rmLabelStoreObserver = defineObserver("labelStore", {
+    handler: r => {
+      if (r.status === 201 || r.url.match(reLabel)) {
+        labelStore.refresh();
+      }
+      console.debug("labelStore handler called by observer");
+    },
+  });
+
+  const locationStore = useLocationStore();
+  const reLocation = /\/api\/v1\/locations\/.*/gm;
+  const rmLocationStoreObserver = defineObserver("locationStore", {
+    handler: r => {
+      if (r.status === 201 || r.url.match(reLocation)) {
+        locationStore.refresh();
+      }
+      console.debug("locationStore handler called by observer");
+    },
+  });
+
+  const itemStore = useItemStore();
+  const reItem = /\/api\/v1\/items\/.*/gm;
+  const rmItemStoreObserver = defineObserver("itemStore", {
+    handler: r => {
+      if (r.status === 201 || r.url.match(reItem)) {
+        itemStore.refresh();
+      }
+      console.debug("itemStore handler called by observer");
+    },
+  });
+
+  const eventBus = useEventBus();
+  eventBus.on(
+    EventTypes.ClearStores,
+    () => {
+      labelStore.refresh();
+      itemStore.refresh();
+      locationStore.refresh();
+    },
+    "stores"
+  );
+
+  onUnmounted(() => {
+    rmLabelStoreObserver();
+    rmLocationStoreObserver();
+    rmItemStoreObserver();
+    eventBus.off(EventTypes.ClearStores, "stores");
+  });
+</script>

frontend/layouts/home.vue

@@ -1,69 +0,0 @@
-<template>
-  <div>
-    <AppToast />
-    <AppHeader />
-    <main>
-      <slot></slot>
-    </main>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { useItemStore } from "~~/stores/items";
-  import { useLabelStore } from "~~/stores/labels";
-  import { useLocationStore } from "~~/stores/locations";
-  /**
-   * Store Provider Initialization
-   */
-
-  const labelStore = useLabelStore();
-  const reLabel = /\/api\/v1\/labels\/.*/gm;
-  const rmLabelStoreObserver = defineObserver("labelStore", {
-    handler: r => {
-      if (r.status === 201 || r.url.match(reLabel)) {
-        labelStore.refresh();
-      }
-      console.debug("labelStore handler called by observer");
-    },
-  });
-
-  const locationStore = useLocationStore();
-  const reLocation = /\/api\/v1\/locations\/.*/gm;
-  const rmLocationStoreObserver = defineObserver("locationStore", {
-    handler: r => {
-      if (r.status === 201 || r.url.match(reLocation)) {
-        locationStore.refresh();
-      }
-      console.debug("locationStore handler called by observer");
-    },
-  });
-
-  const itemStore = useItemStore();
-  const reItem = /\/api\/v1\/items\/.*/gm;
-  const rmItemStoreObserver = defineObserver("itemStore", {
-    handler: r => {
-      if (r.status === 201 || r.url.match(reItem)) {
-        itemStore.refresh();
-      }
-      console.debug("itemStore handler called by observer");
-    },
-  });
-
-  const eventBus = useEventBus();
-  eventBus.on(
-    EventTypes.ClearStores,
-    () => {
-      labelStore.refresh();
-      itemStore.refresh();
-      locationStore.refresh();
-    },
-    "stores"
-  );
-
-  onUnmounted(() => {
-    rmLabelStoreObserver();
-    rmLocationStoreObserver();
-    rmItemStoreObserver();
-    eventBus.off(EventTypes.ClearStores, "stores");
-  });
-</script>

frontend/middleware/auth.ts

@@ -0,0 +1,15 @@
+import { useAuthStore } from "~~/stores/auth";
+
+export default defineNuxtRouteMiddleware(async () => {
+  const auth = useAuthStore();
+  const api = useUserApi();
+
+  if (!auth.self) {
+    const { data, error } = await api.user.self();
+    if (error) {
+      navigateTo("/");
+    }
+
+    auth.$patch({ self: data.item });
+  }
+});

frontend/pages/home.vue

@@ -5,8 +5,9 @@
   import { useLocationStore } from "~~/stores/locations";
 
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
+
   useHead({
     title: "Homebox | Home",
   });
@@ -15,15 +16,6 @@
 
   const auth = useAuthStore();
 
-  if (auth.self === null) {
-    const { data, error } = await api.user.self();
-    if (error) {
-      navigateTo("/");
-    }
-
-    auth.$patch({ self: data.item });
-  }
-
   const itemsStore = useItemStore();
   const items = computed(() => itemsStore.items);
 

frontend/pages/item/[id]/edit.vue

@@ -6,7 +6,7 @@
   import { capitalize } from "~~/lib/strings";
 
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
 
   const route = useRoute();

frontend/pages/item/[id]/index.vue

@@ -3,7 +3,7 @@
   import { ItemAttachment } from "~~/lib/api/types/data-contracts";
 
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
 
   const route = useRoute();

frontend/pages/item/new.vue

@@ -1,6 +1,6 @@
 <script setup>
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
 
   const show = reactive({

frontend/pages/items.vue

@@ -4,8 +4,9 @@
   import { useLocationStore } from "~~/stores/locations";
 
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
+
   useHead({
     title: "Homebox | Home",
   });

frontend/pages/label/[id].vue

@@ -2,7 +2,7 @@
   import type { DateDetail, Detail } from "~~/components/global/DetailsSection/types";
 
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
 
   const route = useRoute();

frontend/pages/location/[id].vue

@@ -2,7 +2,7 @@
   import { Detail, DateDetail } from "~~/components/global/DetailsSection/types";
 
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
 
   const route = useRoute();

frontend/pages/profile.vue

@@ -5,7 +5,7 @@
   import { currencies, Currency } from "~~/lib/data/currency";
 
   definePageMeta({
-    layout: "home",
+    middleware: ["auth"],
   });
   useHead({
     title: "Homebox | Profile",