Fix invalid token redirection

web/src/App.vue

@@ -5,24 +5,30 @@
   </div>
   <v-app>
     <v-main>
+      <router-view v-slot="{ Component }">
         <keep-alive>
-        <RouterView />
+          <component :is="Component" />
         </keep-alive>
+      </router-view>
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
 import { useAppStore } from './store/appStore'
-import { onMounted, onBeforeMount } from 'vue'
+import { onMounted } from 'vue'
 
+const router = useRouter()
 const appStore = useAppStore()
 
 onMounted(async () => {
   await appStore.fetchMe()
-})
 
-onBeforeMount(() => {
+  if (!appStore.me) {
+    console.log('Not logged in')
+    router.replace({ name: 'Login' })
+  }
   appStore.selectedCampus = appStore.me?.campus || ''
 })
 </script>

web/src/router/index.ts

@@ -41,7 +41,7 @@ const routes = [
     component: () => import('@/layouts/single/Default.vue'),
     children: [
       {
-        path: ':serialNumber',
+        path: '',
         name: 'Printer',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route

web/src/views/Login.vue

@@ -62,20 +62,15 @@
 <script lang="ts" setup>
 import { ref, reactive } from 'vue'
 import { api } from '@/api'
-import { getJwtToken, saveJwtToken } from '@/auth'
+import { saveJwtToken } from '@/auth'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '@/store/appStore'
 
+const appStore = useAppStore()
+
 const router = useRouter()
 
-const token = getJwtToken()
+if (appStore.me) router.push({ name: 'Home' })
-
-const { fetchMe } = useAppStore()
-
-if (token) {
-  fetchMe()
-  router.replace({ name: 'Home' })
-}
 
 const username = ref<string>('')
 const password = ref<string>('')
@@ -102,7 +97,7 @@ async function login() {
 
     saveJwtToken(token)
 
-    await fetchMe()
+    await appStore.fetchMe()
 
     router.push({ name: 'Home' })
   } catch (error: any) {