feat(router): Add navigation guard

src/components/ui/TheHeader.vue

@@ -29,14 +29,14 @@
 </template>
 
 <script>
-import firebase from '@/utilities/firebase';
-import { mapActions } from 'vuex';
+// import firebase from '@/utilities/firebase';
+import { mapGetters, mapActions } from 'vuex';
 import TimerBar from '@/components/timer/TimerBar.vue';
 import Menubar from 'primevue/menubar';
 
 export default {
   components: { TimerBar, Menubar },
-  emits: ['showLogin', 'showRegister'],
+  emits: ['login', 'register'],
   data() {
     return {
       items: [
@@ -49,9 +49,10 @@ export default {
     };
   },
   computed: {
-    isLoggedIn() {
-      return firebase.auth().currentUser;
-    },
+    // isLoggedIn() {
+    //   return firebase.auth().currentUser;
+    // },
+    ...mapGetters('auth', ['isLoggedIn']),
   },
   methods: {
     ...mapActions('auth', ['logout']),

src/main.js

@@ -16,13 +16,19 @@ import 'primeicons/primeicons.css';
 import 'primeflex/primeflex.css';
 
 import App from './App.vue';
-import router from './router';
 import store from './store/index';
+import router from './router';
 import firebase from './utilities/firebase';
 
 let app;
 
 firebase.auth().onAuthStateChanged(() => {
+  // Check if user is logged in on firebase
+  // logout if not
+  if (!firebase.auth().currentUser) {
+    store.dispatch('auth/logout');
+  }
+
   if (!app) {
     app = createApp(App);
 

src/router/index.js

@@ -55,7 +55,8 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach(async (to, from, next) => {
+router.beforeEach((to, from, next) => {
+  console.log('beforeEach', to.meta, firebase.auth().currentUser);
   if (to.meta.requiresAuth && !firebase.auth().currentUser) {
     next('login');
   } else if (to.meta.requiresNoAuth && firebase.auth().currentUser) {

src/store/auth/index.js

@@ -10,6 +10,7 @@ export default {
       name: '',
       username: '',
       email: '',
+      isLoggedIn: true,
     };
   },
   mutations: authMutations,

src/store/auth/mutations.js

@@ -3,6 +3,7 @@ import router from '@/router';
 export default {
   authSuccess(state, payload) {
     const userData = payload;
+    state.isLoggedIn = true;
     state.email = userData.email;
     state.registrationError = false;
     state.errorMsg = '';
@@ -11,7 +12,7 @@ export default {
 
   authFail(state, payload) {
     const error = payload;
-
+    state.isLoggedIn = false;
     state.registrationError = true;
     state.errorMsg = error.message;
   },

src/store/index.js

@@ -1,4 +1,4 @@
-import { createStore } from 'vuex';
+import { createStore, createLogger } from 'vuex';
 import rootMutations from './mutations';
 import rootActions from './actions';
 import rootGetters from './getters';
@@ -10,9 +10,7 @@ import authModule from './auth/index';
 
 const store = createStore({
   state() {
-    return {
-      isLoggedIn: false,
-    };
+    return {};
   },
   mutations: rootMutations,
   actions: rootActions,
@@ -22,6 +20,7 @@ const store = createStore({
     timer: timerModule,
     auth: authModule,
   },
+  plugins: process.env.NODE_ENV !== 'production' ? [createLogger()] : [],
 });
 
 export default store;

src/views/Login.vue

@@ -5,19 +5,13 @@
     <label for="password">Password</label>
     <Password id="password" v-model="password" :feedback="false" class="p-d-block" />
     <Button label="Login" autofocus @click="loginUser" />
-    <Button
-      label="Register"
-      @click="
-        showRegister = true;
-        showLogin = false;
-      "
-      class="p-button-text"
-    />
+    <Button label="Register" @click="registerUser" class="p-button-text" />
   </Panel>
 </template>
 
 <script>
 import { mapActions } from 'vuex';
+import router from '@/router';
 
 export default {
   data() {
@@ -33,6 +27,9 @@ export default {
       this.email = '';
       this.password = '';
     },
+    registerUser() {
+      router.replace({ path: 'register' });
+    },
   },
 };
 </script>