Router guards

src/components/AppHeader.vue

@@ -13,6 +13,7 @@
       <RouterLink class="header__nav__link" :to="{ name: 'Legal' }"
         >Legal</RouterLink
       >
+      <RouterLink :to="{ name: 'Dashboard' }">Dashboard</RouterLink>
     </nav>
   </header>
 </template>

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import NotFound from "../components/NotFound.vue";
+import store from "../store";
 
 Vue.use(VueRouter);
 
@@ -24,6 +25,20 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "AppLegal" */ "../views/AppLegal.vue")
   },
+  {
+    path: "/dashboard",
+    name: "Dashboard",
+    meta: {
+      requiresAuth: true
+    },
+    component: () =>
+      import(/* webpackChunkName: "Dashboard" */ "../views/UserDashboard")
+  },
+  {
+    path: "/login",
+    name: "Login",
+    component: () => import(/* webpackChunkName: "Login" */ "../views/AppLogin")
+  },
   {
     path: "/user/:username",
     name: "Users",
@@ -71,4 +86,16 @@ const router = new VueRouter({
   }
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (store.state.auth) {
+      next();
+    } else {
+      next({ name: "Login" });
+    }
+  } else {
+    next();
+  }
+});
+
 export default router;

src/store/index.js

@@ -5,14 +5,30 @@ Vue.use(Vuex);
 
 const store = new Vuex.Store({
   state: {
-    users: []
+    users: [],
+    username: null,
+    auth: false
   },
   mutations: {
     setUsers(state, users) {
       state.users = users;
+    },
+    doLogin(state, username) {
+      state.auth = true;
+      state.username = username;
+    },
+    doLogout(state) {
+      state.auth = false;
+      state.username = null;
     }
   },
   actions: {
+    doLogin({ commit }, username) {
+      commit("doLogin", username);
+    },
+    doLogout({ commit }) {
+      commit("doLogout");
+    },
     async setUsers({ commit }) {
       const users = window.localStorage.getItem("users");
       if (users) {

src/views/AppLogin.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h2>Login form</h2>
+    <form @submit.prevent="onSubmit" id="form">
+      <input v-model="username" required type="text" placeholder="Username" />
+      <input
+        v-model="password"
+        required
+        type="password"
+        placeholder="Password"
+      />
+      <input type="submit" value="Login" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppLogin",
+  data() {
+    return {
+      username: "",
+      password: ""
+    };
+  },
+  methods: {
+    async onSubmit() {
+      try {
+        await this.$store.dispatch("doLogin", this.username);
+        this.$router.push({ name: "Dashboard" });
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+div {
+  padding: 7rem 0.5rem;
+  width: 30vw;
+  min-width: 500px;
+  margin: 0 auto;
+}
+form {
+  background-color: gray;
+  padding: 1rem;
+}
+
+form * {
+  width: 100%;
+  margin: 0.3rem 0;
+  padding: 0.2rem;
+}
+</style>

src/views/UserDashboard.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>User Dashboard</h1>
+    <a href="#" @click="onLogout">Logout</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserDashboard",
+  methods: {
+    onLogout() {
+      this.$store.dispatch("doLogout");
+      this.$router.push("/");
+    }
+  }
+};
+</script>
+
+<style scoped>
+div {
+  padding: 7rem 0.5rem;
+  text-align: center;
+}
+</style>