Added basic auth and route protection

frontend/src/App.vue

@@ -1,8 +1,39 @@
 <script setup>
-import { RouterView } from 'vue-router'
+import { RouterView, RouterLink } from 'vue-router'
+import { IsLoggedIn } from '../wailsjs/go/main/Auth'
+import { ref, onMounted } from 'vue'
+
+
+const loggedIn = ref(false)
+
+onMounted(() => {
+  IsLoggedIn().then(val => {
+    loggedIn.value = val
+  })
+})
+
 </script>
 
 <template>
+  <header>
+    <nav>
+      <ul>
+        <li v-if="loggedIn">
+          Logged In
+        </li>
+        <li v-else>
+          <RouterLink to="/"> Home </RouterLink>
+          <RouterLink to="/login"> Log in </RouterLink>
+          <RouterLink to="/protected"> Protected </RouterLink>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <aside>
+    <RouterLink to="/"> Home </RouterLink>
+    <RouterLink to="/login"> Log in </RouterLink>
+    <RouterLink to="/protected"> Protected </RouterLink>
+  </aside>
   <main>
     <RouterView />
   </main>

frontend/src/main.js

@@ -1,22 +1,62 @@
 import { createApp } from 'vue'
 import { createWebHashHistory, createRouter } from 'vue-router'
+import { IsLoggedIn } from '../wailsjs/go/main/Auth'
 import App from './App.vue'
 import './style.css';
 
 const routes = [
-	{
-		path: '/',
-		name: 'home',
-		component: () => import('./pages/Index.vue')
-	}
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('./pages/Index.vue'),
+    meta: {
+      requiresAuth: false,
+    }
+  },
+  {
+    path: '/protected',
+    name: 'protected',
+    component: () => import("./pages/Protected.vue"),
+    meta: {
+      requiresAuth: true,
+    }
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import("./pages/Login.vue"),
+    meta: {
+      requiresAuth: "guest",
+    }
+  }
 ]
 
 const router = createRouter({
-	history: createWebHashHistory(),	
-	routes
+  history: createWebHashHistory(),
+  routes
+})
+
+
+router.beforeEach(async (to, from) => {
+  // instead of having to check every route record with
+  // to.matched.some(record => record.meta.requiresAuth)
+  const loggedIn = await IsLoggedIn()
+  if (to.meta.requiresAuth === true && !loggedIn) {
+    return {
+      path: '/login',
+      query: { redirect: to.fullPath },
+    }
+  } else {
+    if (to.meta.requiresAuth === 'guest' && loggedIn) {
+      return {
+        path: '/protected',
+        query: { redirect: to.fullPath },
+      }
+    }
+  }
 })
 
 
 createApp(App)
-	.use(router)
-	.mount('#app')
+  .use(router)
+  .mount('#app')

frontend/src/pages/Login.vue

@@ -0,0 +1,5 @@
+<script setup>
+</script>
+<template>
+    <h1> Login </h1>
+</template>

frontend/src/pages/Protected.vue

@@ -0,0 +1,5 @@
+<script setup>
+</script>
+<template>
+<h1> Potected </h1>
+</template>