fix: logged in state

frontend/src/App.vue

@@ -16,7 +16,7 @@ export default {
   },
   computed: {
     showNavBar() {
-      return this.$route.name !== 'Login' && this.$route.name !== 'Register';
+      return ['Login', 'Register'].indexOf(this.$route.name) === -1;
     },
   },
 };

frontend/src/components/Dashboard/index.vue

@@ -23,5 +23,10 @@ export default {
       isLoggedIn: 'isLoggedIn',
     }),
   },
+  mounted() {
+    if (!this.isLoggedIn) {
+      this.$router.push('/login');
+    }
+  },
 };
 </script>

frontend/src/components/NavBar/index.vue

@@ -9,7 +9,7 @@
       </router-link>
       <div class="mx-auto w-100"></div>
       <div class="flex items-end md:order-2">
-        <UserMenu />
+        <UserMenu v-if="isLoggedIn" />
         <ThemeToggle />
       </div>
     </div>
@@ -28,7 +28,6 @@ export default {
   computed: {
     appName: () => process.env.VUE_APP_NAME,
     ...mapGetters({
-      user: 'user',
       isLoggedIn: 'isLoggedIn',
     }),
   },

frontend/src/main.js

@@ -26,15 +26,6 @@ getAuth().onAuthStateChanged((user) => {
   if (user) {
     store.dispatch('setUser', user);
     store.dispatch('fetchPosts', store.state);
-  } else {
-    console.log(router);
-    if (
-      ['Login', 'Register', 'Terms', 'PrivacyPolicy'].indexOf(
-        router.currentRoute._value.name,
-      ) === -1
-    ) {
-      router.replace({ name: 'Login' });
-    }
   }
 });
 

frontend/src/store/actions/index.js

@@ -3,6 +3,7 @@ import { apiRequest } from './api';
 export default {
   setUser({ commit }, user) {
     commit('SET_USER', user);
+    commit('SET_LOGGED_IN', user.email && user.displayName);
   },
   async fetchPosts({ commit }, { startAfter, limit }) {
     // make get request with bearer token authentication

frontend/src/store/actions/index.spec.js

@@ -45,17 +45,22 @@ describe('actions', () => {
     it('makes the expected mutations', (done) => {
       const userFixture = {
         email: 'john@doe.com',
+        displayName: 'John Doe',
         uid: 123,
       };
       testAction(
         actions.setUser,
         userFixture,
-        { user: null },
+        { user: { displayName: '', email: '' }, loggedIn: false },
         [
           {
             type: 'SET_USER',
             payload: userFixture,
           },
+          {
+            type: 'SET_LOGGED_IN',
+            payload: userFixture.email && userFixture.displayName,
+          },
         ],
         done,
       );

frontend/src/store/getters.js

@@ -3,7 +3,7 @@ export default {
     return state.user;
   },
   isLoggedIn(state) {
-    return state.user !== null;
+    return state.loggedIn;
   },
   getPosts(state) {
     return state.posts;

frontend/src/store/getters.spec.js

@@ -21,14 +21,16 @@ describe('getters', () => {
           uid: '123',
           displayName: 'John Doe',
         },
+        loggedIn: true,
       };
       const result = getters.isLoggedIn(state);
 
       expect(result).toBe(true);
     });
     it('should return false if user is null', () => {
       const state = {
-        user: null,
+        user: { displayName: '', email: '' },
+        loggedIn: false,
       };
       const result = getters.isLoggedIn(state);
 

frontend/src/store/index.js

@@ -13,6 +13,7 @@ const store = createStore({
     message: null,
     loadingPosts: false,
     creatingPost: false,
+    loggedIn: false,
   },
   getters,
   mutations,

frontend/src/store/mutations.js

@@ -2,6 +2,9 @@ export default {
   SET_USER(state, data) {
     state.user = data;
   },
+  SET_LOGGED_IN(state, data) {
+    state.loggedIn = data;
+  },
   SET_POSTS(state, data) {
     state.posts = data;
   },