Programmatically route based on auth state.

61040-fa23 · Oct 5, 2023 · 2d7c44f · 2d7c44f
1 parent 8500c9d
commit 2d7c44f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/src/About.vue b/src/About.vue
@@ -4,7 +4,7 @@
 
 <template>
   <Header>
-    <template v-slot:subtitle>About Cartoons</template>
+    <template v-if="$route.params.persona" v-slot:subtitle>About Cartoons</template>
   </Header>
 
   <p v-if="$route.params.persona === 'pirate'">

diff --git a/src/router.ts b/src/router.ts
@@ -8,6 +8,10 @@ const router = createRouter({
   routes: [
     {
       path: '/',
+      component: AboutVue
+    },
+    {
+      path: '/home',
       component: Home
     },
     {

diff --git a/src/stores/auth.ts b/src/stores/auth.ts
@@ -1,13 +1,18 @@
 import {ref, computed} from 'vue';
 import { defineStore } from 'pinia';
+import { useRouter } from 'vue-router';
 
 export const useAuthStore = defineStore('auth', () => {
   const email = ref('');
 
   const authenticated = ref(false);
 
+  const router = useRouter();
+
   function toggleAuth() {
     authenticated.value = email.value !== '' && !authenticated.value;
+    if (authenticated.value) router.push('/home')
+    else router.push('/');
   }
 
   return {email, authenticated, toggleAuth}