Part 10 - Vue Authentication

Author: drehimself

src/components/auth/Login.vue

@@ -1,5 +1,46 @@
 <template>
-  <div class="flex-center">
-    Content for Login Page
+  <div class="login-form">
+    <h2 class="login-heading">Login</h2>
+    <form action="#" @submit.prevent="login">
+
+      <div class="form-control">
+        <label for="email">Username/Email</label>
+        <input type="email" name="username" id="username" class="login-input" v-model="username">
+      </div>
+
+      <div class="form-control mb-more">
+        <label for="password">Password</label>
+        <input type="password" name="password" id="password" class="login-input" v-model="password">
+      </div>
+
+      <div class="form-control">
+        <button type="submit" class="btn-submit">Login</button>
+      </div>
+
+    </form>
   </div>
 </template>
+
+<script>
+export default {
+  name: 'login',
+  data() {
+    return {
+      username: '',
+      password: '',
+    }
+  },
+  methods: {
+    login() {
+      this.$store.dispatch('retrieveToken', {
+        username: this.username,
+        password: this.password,
+      })
+        .then(response => {
+          this.$router.push({ name: 'todo' })
+        })
+    }
+  }
+}
+</script>
+

src/components/auth/Logout.vue

@@ -0,0 +1,15 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  created() {
+    this.$store.dispatch('destroyToken')
+      .then(response => {
+        this.$router.push({ name: 'home' })
+      })
+  }
+}
+</script>
+

src/components/auth/Register.vue

@@ -1,5 +1,51 @@
 <template>
-  <div class="flex-center">
-    Content for Register Page
+  <div class="login-form">
+    <h2 class="login-heading">Register</h2>
+    <form action="#" @submit.prevent="register">
+
+      <div class="form-control">
+        <label for="name">Name</label>
+        <input type="text" name="name" id="name" class="login-input" v-model="name">
+      </div>
+
+      <div class="form-control">
+        <label for="email">Email</label>
+        <input type="email" name="email" id="email" class="login-input" v-model="email">
+      </div>
+
+      <div class="form-control mb-more">
+        <label for="password">Password</label>
+        <input type="password" name="password" id="password" class="login-input" v-model="password">
+      </div>
+
+      <div class="form-control">
+        <button type="submit" class="btn-submit">Create Account</button>
+      </div>
+
+    </form>
   </div>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: '',
+      email: '',
+      password: '',
+    }
+  },
+  methods: {
+    register() {
+      this.$store.dispatch('register', {
+        name: this.name,
+        email: this.email,
+        password: this.password,
+      })
+        .then(response => {
+          this.$router.push({ name: 'login' })
+        })
+    }
+  }
+}
+</script>

src/components/layouts/Master.vue

@@ -4,8 +4,9 @@
       <li><router-link :to="{ name: 'home' }">Home</router-link></li>
       <li><router-link :to="{ name: 'todo' }">App</router-link></li>
       <li><router-link :to="{ name: 'about' }">About</router-link></li>
-      <li><router-link :to="{ name: 'login' }">Login</router-link></li>
-      <li><router-link :to="{ name: 'register' }">Register</router-link></li>
+      <li v-if="!loggedIn"><router-link :to="{ name: 'login' }">Login</router-link></li>
+      <li v-if="!loggedIn"><router-link :to="{ name: 'register' }">Register</router-link></li>
+      <li v-if="loggedIn"><router-link :to="{ name: 'logout' }">Logout</router-link></li>
 
     </ul>
 
@@ -15,11 +16,15 @@
 
 <script>
 export default {
-
+  computed: {
+    loggedIn() {
+      return this.$store.getters.loggedIn
+    }
+  }
 }
 </script>
 
-<style>
+<style lang="scss">
 
   * {
     box-sizing: border-box;
@@ -62,5 +67,54 @@ export default {
     text-transform: uppercase;
   }
 
+  // Auth Pages
+
+  label {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  .login-heading {
+    margin-bottom: 16px;
+  }
+
+  .form-control {
+    margin-bottom: 24px;
+  }
+
+  .mb-more {
+    margin-bottom: 42px;
+  }
+
+  .login-form {
+    max-width: 500px;
+    margin: auto;
+  }
+
+  .login-input {
+    width: 100%;
+    font-size: 16px;
+    padding: 12px 16px;
+    outline: 0;
+    border-radius: 3px;
+    border: 1px solid lightgrey;
+  }
+
+  .btn-submit {
+    width: 100%;
+    padding: 14px 12px;
+    font-size: 18px;
+    font-weight: bold;
+    background: #60BD4F;
+    color: white;
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:hover {
+      background: darken(#60BD4F, 10%);
+    }
+
+  }
+
 </style>
 

src/main.js

@@ -16,6 +16,28 @@ const router = new VueRouter({
   mode: 'history'
 })
 
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (!store.getters.loggedIn) {
+      next({
+        name: 'login',
+      })
+    } else {
+      next()
+    }
+  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
+    if (store.getters.loggedIn) {
+      next({
+        name: 'todo',
+      })
+    } else {
+      next()
+    }
+  } else {
+    next()
+  }
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/routes.js

@@ -2,6 +2,7 @@ import App from './App'
 import LandingPage from './components/marketing/LandingPage'
 import About from './components/marketing/About'
 import Login from './components/auth/Login'
+import Logout from './components/auth/Logout'
 import Register from './components/auth/Register'
 
 const routes = [
@@ -13,7 +14,10 @@ const routes = [
   {
     path: '/todo',
     name: 'todo',
-    component: App
+    component: App,
+    meta: {
+      requiresAuth: true,
+    }
   },
   {
     path: '/about',
@@ -23,12 +27,23 @@ const routes = [
   {
     path: '/login',
     name: 'login',
-    component: Login
+    component: Login,
+    meta: {
+      requiresVisitor: true,
+    }
   },
   {
     path: '/register',
     name: 'register',
-    component: Register
+    component: Register,
+    meta: {
+      requiresVisitor: true,
+    }
+  },
+  {
+    path: '/logout',
+    name: 'logout',
+    component: Logout
   }
 ]
 

src/store/store.js

@@ -7,10 +7,14 @@ axios.defaults.baseURL = 'http://todo-laravel.test/api'
 
 export const store = new Vuex.Store({
   state: {
+    token: localStorage.getItem('access_token') || null,
     filter: 'all',
     todos: [],
   },
   getters: {
+    loggedIn(state) {
+      return state.token !== null
+    },
     remaining(state) {
       return state.todos.filter(todo => !todo.completed).length
     },
@@ -64,9 +68,73 @@ export const store = new Vuex.Store({
     },
     retrieveTodos(state, todos) {
       state.todos = todos
+    },
+    retrieveToken(state, token) {
+      state.token = token
+    },
+    destroyToken(state) {
+      state.token = null
     }
   },
   actions: {
+    register(context, data) {
+      return new Promise((resolve, reject) => {
+        axios.post('/register', {
+          name: data.name,
+          email: data.email,
+          password: data.password,
+        })
+          .then(response => {
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
+    destroyToken(context) {
+      axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
+
+      if (context.getters.loggedIn) {
+        return new Promise((resolve, reject) => {
+          axios.post('/logout')
+            .then(response => {
+              localStorage.removeItem('access_token')
+              context.commit('destroyToken')
+              resolve(response)
+              // console.log(response);
+              // context.commit('addTodo', response.data)
+            })
+            .catch(error => {
+              localStorage.removeItem('access_token')
+              context.commit('destroyToken')
+              reject(error)
+            })
+        })
+      }
+    },
+    retrieveToken(context, credentials) {
+
+      return new Promise((resolve, reject) => {
+        axios.post('/login', {
+          username: credentials.username,
+          password: credentials.password,
+        })
+          .then(response => {
+            const token = response.data.access_token
+
+            localStorage.setItem('access_token', token)
+            context.commit('retrieveToken', token)
+            resolve(response)
+            // console.log(response);
+            // context.commit('addTodo', response.data)
+          })
+          .catch(error => {
+            console.log(error)
+            reject(error)
+          })
+        })
+    },
     retrieveTodos(context) {
       axios.get('/todos')
         .then(response => {