Saving user-object and restoring it + logout button

The user from server will be saved to localstorage now. It will be updated on each URL switch if changed.

src/App.vue

@@ -11,7 +11,8 @@
 
 			<div class="user">
 				<div v-if="user">
-					<span>Username: {{ user.username }}</span>
+					<span>Username: {{ user.username }} </span>
+					<span class="rl" @click="logout">Logout</span>
 				</div>
 				<router-link class="rl" to="/login" v-else>Login</router-link>
 			</div>
@@ -45,6 +46,12 @@
 			},
 		},
 
+		methods: {
+			logout() {
+				this.core.logout()
+			}
+		},
+
 		components: {
 			MenuContainer
 		},
@@ -86,7 +93,7 @@
 	}
 
 	header .user {
-		padding: 0.2em 1em;
+		padding: 0.2em 0em;
 	}
 
 	.content {

src/main.js

@@ -9,6 +9,18 @@ Vue.config.productionTip = true
 const core = new Core(store)
 Vue.prototype.core = core
 
+//Update Vuex if localstorage loginstate changed.
+router.beforeEach((from, to, next) => {
+	let user = localStorage.getItem('user')
+	let originalUser = store.state.user
+
+	if(!(user === null && originalUser === null) && (user === null || originalUser === null || user != JSON.stringify(originalUser))) {
+		core.commit('setUser', JSON.parse(user))
+	}
+
+	next()
+})
+
 new Vue({
   router,
   store,

src/scripts/core.js

@@ -33,22 +33,18 @@ export default class {
 				})
 	}
 
-	lol(username, password) {
-		//TODO: return promise somehow
-		//alert('Login attempt as user \'' + username + '\' with password \'' + password + '\'')
-
-		/*
-		this.get('/soos')
-			.then(function (response) {
-				console.log('Response: ', response.data)
-			})
-		*/
+	logout() {
+		localStorage.removeItem('user');
+			this.commit('setUser', null)
+	}
 
+	login(username, password) {
+		//TODO: return promise somehow
 		this.post('/login', {
 			username: username,
 			password: password,
 		}).then((response) => {
-			console.log('Response: ', response.data)
+			localStorage.setItem('user', JSON.stringify(response.data));
 			this.commit('setUser', response.data)
 		})
 	}

src/views/Login.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+	//TODO: Check username for allowed chars and length.
 	export default {
 		data() {
 			return {
@@ -61,7 +62,7 @@
 				return false
 			},
 			attemptLogin() {
-				this.core.lol(this.username, this.password)
+				this.core.login(this.username, this.password)
 			},
 		}
 	}