User Logout code

Author: atomjar

src/components/AppNav.vue

@@ -3,12 +3,15 @@
     <router-link to="/">
       Home
     </router-link>
-    <router-link to="/dashboard">
+    <router-link v-if="loggedIn" to="/dashboard">
       Dashboard
     </router-link>
     <router-link v-if="!loggedIn" to="/login" class="button">
       Login
     </router-link>
+    <button v-else type="button" class="logoutButton" @click="logout">
+      Logout
+    </button>
   </div>
 </template>
 
@@ -17,6 +20,11 @@ import { authComputed } from '../vuex/helpers.js'
 export default {
   computed: {
     ...authComputed
+  },
+  methods: {
+    logout () {
+      this.$store.dispatch('logout')
+    }
   }
 }
 </script>

src/router.js

@@ -19,7 +19,8 @@ const router = new Router({
     {
       path: '/dashboard',
       name: 'dashboard',
-      component: Dashboard
+      component: Dashboard,
+      meta: { requiresAuth: true }
     },
     {
       path: '/register',
@@ -34,4 +35,13 @@ const router = new Router({
   ]
 })
 
+router.beforeEach((to, from, next) => {
+  const loggedIn = localStorage.getItem('user')
+
+  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
+    next('/')
+  }
+  next()
+})
+
 export default router

src/vuex/store.js

@@ -15,6 +15,10 @@ export default new Vuex.Store({
       axios.defaults.headers.common['Authorization'] = `Bearer ${
         userData.token
       }`
+    },
+    CLEAR_USER_DATA () {
+      localStorage.removeItem('user')
+      location.reload()
     }
   },
   actions: {
@@ -31,6 +35,9 @@ export default new Vuex.Store({
         .then(({ data }) => {
           commit('SET_USER_DATA', data)
         })
+    },
+    logout ({ commit }) {
+      commit('CLEAR_USER_DATA')
     }
   },
   getters: {