app/ayanova/src/App.vue

@@ -174,6 +174,17 @@
             <v-list-tile-title>About</v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
+        <v-list-tile v-if="this.$store.state.authenticated" to="/login" v-on:click.native="logout()">
+          <v-list-tile-action>
+            <v-icon>fa-sign-out-alt</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Log off</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <!-- <router-link v-if="authenticated" to="/login" v-on:click.native="logout()" replace>Logout</router-link> -->
+
+        <!--Nav menu links END-->
       </v-list>
     </v-navigation-drawer>
     <v-toolbar color="indigo" dark fixed app>
@@ -217,9 +228,23 @@ export default {
   name: "App",
   data() {
     return {
-      drawer: null
+      drawer: null,
+      
     };
   },
+  mounted() {
+    if (!this.$store.state.authenticated) {
+      this.$router.replace({ name: "login" });
+    }
+  },
+  methods: {
+    setAuthenticated(status) {
+      this.$store.state.authenticated = status;
+    },
+    logout() {
+      this.$store.state.authenticated = false;
+    }
+  },
   props: {
     source: String
   }

app/ayanova/src/router.js

@@ -10,9 +10,28 @@ export default new Router({
   routes: [
     {
       path: "/",
-      name: "home",
-      component: Home
+      redirect: {
+        name: "login"
+      }
     },
+    {
+      path: "/login",
+      name: "login",
+      component: () =>
+        import(/* webpackChunkName: "login" */ "./views/login.vue")
+    },
+    {
+      path: "/secure",
+      name: "secure",
+      component: () =>
+      import(/* webpackChunkName: "secure" */ "./views/secure.vue")
+    },
+
+    // {
+    //   path: "/",
+    //   name: "home",
+    //   component: Home
+    // },
     {
       path: "/about",
       name: "about",

app/ayanova/src/store.js

@@ -4,7 +4,13 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
+  state: {
+    authenticated: false,
+      mockAccount: {
+        username: "manager",
+        password: "letmein"
+      }
+  },
   mutations: {},
   actions: {}
 });

app/ayanova/src/views/login.vue

@@ -0,0 +1,47 @@
+<template>
+    <div id="login">
+        <h1>Login</h1>
+        <input type="text" name="username" v-model="input.username" placeholder="Username" />
+        <input type="password" name="password" v-model="input.password" placeholder="Password" />
+        <button type="button" v-on:click="login()">Login</button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Login',
+        data() {
+            return {
+                input: {
+                    username: "",
+                    password: ""
+                }
+            }
+        },
+        methods: {
+            login() {
+                if(this.input.username != "" && this.input.password != "") {
+                    if(this.input.username == this.$store.state.mockAccount.username && this.input.password == this.$store.state.mockAccount.password) {
+                        this.$emit("authenticated", true);
+                        this.$router.replace({ name: "secure" });
+                    } else {
+                        console.log("The username and / or password is incorrect");
+                    }
+                } else {
+                    console.log("A username and password must be present");
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    #login {
+        width: 500px;
+        border: 1px solid #CCCCCC;
+        background-color: #FFFFFF;
+        margin: auto;
+        margin-top: 200px;
+        padding: 20px;
+    }
+</style>

app/ayanova/src/views/secure.vue

@@ -0,0 +1,26 @@
+<template>
+    <div id="secure">
+        <h1>Secure Area</h1>
+        <p>
+            This is a secure area
+        </p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Secure',
+        data() {
+            return {};
+        }
+    }
+</script>
+
+<style scoped>
+    #secure {
+        background-color: #FFFFFF;
+        border: 1px solid #CCCCCC;
+        padding: 20px;
+        margin-top: 10px;
+    }
+</style>