From 869d9a168e11bef93fcb91ea9fcce868370d8faa Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Mon, 13 Apr 2026 11:09:12 +0100
Subject: [PATCH] Move admin auth guard to Vue Router

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 vue/src/router/index.js              | 16 ++++++++++++++++
 vue/src/views/CV/JobApplications.vue | 23 +++--------------------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/vue/src/router/index.js b/vue/src/router/index.js
index 74c5ff3..0c0db42 100644
--- a/vue/src/router/index.js
+++ b/vue/src/router/index.js
@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from "vue-router";
 import DefaultLayout from "@/layouts/DefaultLayout.vue";
 import CVLayout from "@/layouts/CVLayout.vue";
 import Landing from "@/views/Landing.vue";
+import { useHomeDataStore } from "@/stores/homeData";
+import { useAuthStore } from "@/stores/auth";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -80,10 +82,24 @@ const router = createRouter({
                     path: "jobs",
                     name: "job-applications",
                     component: () => import("@/views/CV/JobApplications.vue"),
+                    meta: { requiresAdmin: true },
                 },
             ],
         },
     ],
 });
 
+router.beforeEach(async (to) => {
+    if (!to.meta.requiresAdmin) return;
+    const homeData = useHomeDataStore();
+    if (!homeData.loaded) {
+        await new Promise((resolve) => {
+            const stop = homeData.$watch("loaded", (val) => {
+                if (val) { stop(); resolve(); }
+            });
+        });
+    }
+    if (!useAuthStore().user.admin) return "/admin";
+});
+
 export default router;
diff --git a/vue/src/views/CV/JobApplications.vue b/vue/src/views/CV/JobApplications.vue
index f9ec1d7..20684e0 100644
--- a/vue/src/views/CV/JobApplications.vue
+++ b/vue/src/views/CV/JobApplications.vue
@@ -1,14 +1,8 @@
 <script setup>
-import { ref, watch } from "vue";
-import { useRouter, RouterLink } from "vue-router";
-import { useAuthStore } from "@/stores/auth";
-import { useHomeDataStore } from "@/stores/homeData";
+import { ref, onMounted } from "vue";
+import { RouterLink } from "vue-router";
 import { gql } from "@/graphql";
 
-const auth = useAuthStore();
-const homeData = useHomeDataStore();
-const router = useRouter();
-
 const applications = ref([]);
 const editingId = ref(null);
 const editForm = ref({});
@@ -150,18 +144,7 @@ function statusClass(status) {
     return map[status] ?? "";
 }
 
-watch(
-    () => homeData.loaded,
-    (loaded) => {
-        if (!loaded) return;
-        if (!auth.user.admin) {
-            router.push("/admin");
-        } else {
-            fetchApplications();
-        }
-    },
-    { immediate: true },
-);
+onMounted(fetchApplications);
 </script>
 
 <template>