feat(auth): Add navigation guards

src/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import firebase from '@/utilities/firebase';
 import Home from '../views/Home.vue';
 
 const routes = [
@@ -10,6 +11,9 @@ const routes = [
     path: '/home',
     name: 'home',
     component: Home,
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: '/about',
@@ -18,6 +22,9 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
+    meta: {
+      requiresAuth: true,
+    },
   },
   {
     path: '/login',
@@ -26,6 +33,9 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),
+    meta: {
+      requiresNoAuth: true,
+    },
   },
   {
     path: '/register',
@@ -34,6 +44,9 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue'),
+    meta: {
+      requiresNoAuth: true,
+    },
   },
 ];
 
@@ -42,4 +55,14 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach(async (to, from, next) => {
+  if (to.meta.requiresAuth && !firebase.auth().currentUser) {
+    next('login');
+  } else if (to.meta.requiresNoAuth && firebase.auth().currentUser) {
+    next('home');
+  } else {
+    next();
+  }
+});
+
 export default router;

src/store/auth/mutations.js

@@ -6,7 +6,7 @@ export default {
     state.email = userData.email;
     state.registrationError = false;
     state.errorMsg = '';
-    router.push({ path: 'home' });
+    router.replace({ path: 'home' });
   },
 
   authFail(state, payload) {
@@ -19,7 +19,7 @@ export default {
   logout(state) {
     state.isLoggedIn = false;
     state.currentUser = '';
-    router.push({ path: 'login' });
+    router.replace({ path: 'login' });
   },
 
   getUser(state, userData) {

src/views/Register.vue

@@ -1,12 +1,12 @@
 <template>
   <Panel header="Register">
-      <label for="username">Username</label>
-      <InputText id="username" type="text" v-model="username" class="p-mb-2  p-d-block" />
-      <label for="email">Email</label>
-      <InputText id="email" type="email" v-model="email" class="p-mb-2  p-d-block" />
-      <label for="password">Password</label>
-      <Password id="password" v-model="password" :feedback="false" class="p-d-block" />
-      <Button label="Register" @click="registerUser" />
+    <label for="username">Username</label>
+    <InputText id="username" type="text" v-model="username" class="p-mb-2  p-d-block" />
+    <label for="email">Email</label>
+    <InputText id="email" type="email" v-model="email" class="p-mb-2  p-d-block" />
+    <label for="password">Password</label>
+    <Password id="password" v-model="password" :feedback="false" class="p-d-block" />
+    <Button label="Register" @click="registerUser" />
   </Panel>
 </template>