Store user in VueX, dynamic navbar

web/src/components/Navbar.vue

@@ -7,7 +7,7 @@
         <b-collapse id="nav-collapse" is-nav>
 
             <b-navbar-nav>
-                <b-nav-item to="#">Example</b-nav-item>
+                <b-nav-item to="">About</b-nav-item>
             </b-navbar-nav>
 
             <!-- Right aligned nav items -->
@@ -16,10 +16,18 @@
                 <b-nav-item-dropdown right>
                     <!-- Using 'button-content' slot -->
                     <template v-slot:button-content>
-                        <em>User</em>
+                        <em v-if="user">{{ user.username }}</em>
+                        <em v-else>Account</em>
                     </template>
-                    <b-dropdown-item href="#">Profile</b-dropdown-item>
+                    <div v-if="isLoggedIn">
-                    <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+                        <b-dropdown-item to="/profile">Profile</b-dropdown-item>
+                        <b-dropdown-item to="/signout">Sign Out</b-dropdown-item>
+                    </div>
+                    <div v-else>
+                        <b-dropdown-item to="/signup">Sign Up</b-dropdown-item>
+                        <b-dropdown-item to="/signin">Sign In</b-dropdown-item>
+                    </div>
+
                 </b-nav-item-dropdown>
 
             </b-navbar-nav>
@@ -29,7 +37,13 @@
 </template>
 
 <script>
+    import {mapState, mapGetters} from 'vuex'
+
     export default {
-        name: "Navbar"
+        name: "Navbar",
+        computed: {
+            ...mapState(['user']),
+            ...mapGetters(['isLoggedIn'])
+        }
     }
 </script>

web/src/components/SigninForm.vue

@@ -53,7 +53,7 @@
             }
         },
         methods: {
-            ...mapMutations(['setToken', 'setUsername']),
+            ...mapMutations(['setToken', 'setUser']),
 
             signin() {
                 this.error = false
@@ -65,7 +65,7 @@
                 })
                     .then(response => {
                         this.setToken({token: response.data.token})
-                        this.setUsername({username: this.form.username})
+                        this.setUser({username: this.form.username})
                     })
                     .catch(error => {
                         console.log(error)

web/src/store/mutations.js

@@ -1,4 +1,5 @@
 import {setToken, clearToken} from '@/jwt'
+import {setUser, clearUser} from '@/user'
 
 export default {
     setToken: (state, {token}) => {
@@ -9,7 +10,12 @@ export default {
         state.token = null
         clearToken()
     },
-    setUsername: (state, {username}) => {
+    setUser: (state, {username}) => {
-        state.username = username
+        state.user = {username}
+        setUser(username)
+    },
+    clearUser: state => {
+        state.user = null
+        clearUser()
     }
 }

web/src/store/state.js

@@ -1,6 +1,7 @@
 import {getToken} from '@/jwt'
+import {getUser} from '@/user'
 
 export default {
     token: getToken(),
-    username: null
+    user: getUser()
 }

web/src/user/index.js

@@ -0,0 +1,19 @@
+export function setUser(username) {
+    const user = JSON.stringify({
+        username
+    })
+    localStorage.setItem('user', user)
+}
+
+// should only be run at initialization, use VueX store after
+export function getUser() {
+    const userJson = localStorage.getItem('user')
+    if(!userJson) return null
+    return JSON.parse(userJson)
+}
+
+export function clearUser() {
+    localStorage.removeItem('user')
+}
+
+export default {setUser, getUser, clearUser}