Merge pull request #180 from dhax/vue-auth

integrates vue-auth jwt authentication

Author: fundon

client/app.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import axios from 'axios'
+import VueAxios from 'vue-axios'
+import VueAuth from '@websanova/vue-auth'
 import NProgress from 'vue-nprogress'
 import { sync } from 'vuex-router-sync'
 import App from './App.vue'
@@ -8,8 +10,24 @@ import store from './store'
 import * as filters from './filters'
 import { TOGGLE_SIDEBAR } from 'vuex-store/mutation-types'
 
-Vue.prototype.$http = axios
-Vue.axios = axios
+Vue.router = router
+Vue.use(VueAxios, axios)
+Vue.use(VueAuth, {
+  auth: {
+    request: function (req, token) {
+      this.options.http._setHeaders.call(this, req, {Authorization: 'Bearer ' + token})
+    },
+    response: function (res) {
+      // Get Token from response body
+      return res.data
+    }
+  },
+  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
+  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
+  loginData: { url: 'http://localhost:6789/login', fetchUser: false },
+  refreshData: { enabled: false }
+})
+
 Vue.use(NProgress)
 
 // Enable devtools

client/components/layout/Navbar.vue

@@ -17,7 +17,10 @@
             </tooltip>
           </a>
         </div>
-        <div class="nav-right is-flex"></div>
+        <div class="nav-right is-flex">
+          <router-link v-if="!$auth.check()" to="/login" class="nav-item">Login</router-link>
+          <a v-if="$auth.check()" @click="logout" class="nav-item">Logout</a>
+        </div>
       </nav>
     </div>
   </section>
@@ -42,9 +45,21 @@ export default {
     sidebar: 'sidebar'
   }),
 
-  methods: mapActions([
-    'toggleSidebar'
-  ])
+  methods: {
+    ...mapActions([
+      'toggleSidebar'
+    ]),
+    logout () {
+      this.$auth.logout({
+        redirect: 'Home',
+        makeRequest: false
+        // params: {},
+        // success: function () {},
+        // error: function () {},
+        // etc...
+      })
+    }
+  }
 }
 </script>
 

client/router/index.js

@@ -13,6 +13,11 @@ export default new Router({
       path: '/',
       component: require('../views/Home')
     },
+    {
+      name: 'Login',
+      path: '/login',
+      component: require('../views/auth/Login')
+    },
     ...generateRoutesFromMenu(menuModule.state.items),
     {
       path: '*',

client/store/modules/menu/index.js

@@ -24,6 +24,7 @@ const state = {
       name: 'Axios',
       path: '/axiosDemo',
       meta: {
+        auth: true,
         icon: 'fa-rocket',
         link: 'axios/index.vue'
       },

client/views/auth/Login.vue

@@ -0,0 +1,105 @@
+<template>
+<div class="content has-text-centered">
+  <h1 class="is-title is-bold">Login</h1>
+
+  <div class="columns is-vcentered">
+    <div class="column is-6 is-offset-3">
+      <div class="box">
+        <div v-show="error" style="color:red; word-wrap:break-word;">{{ error }}</div>
+        <form v-on:submit.prevent="login">
+          <label class="label">Email</label>
+          <p class="control">
+            <input v-model="data.body.username" class="input" type="text" placeholder="[email protected]">
+          </p>
+          <label class="label">Password</label>
+          <p class="control">
+            <input v-model="data.body.password" class="input" type="password" placeholder="password">
+          </p>
+
+          <p class="control">
+            <label class="checkbox">
+              <input type="checkbox" v-model="data.rememberMe">
+              Remember me
+            </label>
+          </p>
+
+          <hr>
+          <p class="control">
+            <button type="submit" class="button is-primary">Login</button>
+            <button class="button is-default">Cancel</button>
+          </p>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+
+  data () {
+    return {
+      data: {
+        body: {
+          username: null,
+          password: null
+        },
+        rememberMe: false
+      },
+      error: null
+    }
+  },
+  mounted () {
+    if (this.$auth.redirect()) {
+      console.log('Redirect from: ' + this.$auth.redirect().from.name)
+    }
+    // Can set query parameter here for auth redirect or just do it silently in login redirect.
+  },
+  methods: {
+    login () {
+      var redirect = this.$auth.redirect()
+      this.$auth.login({
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        data: this.data.body,
+        rememberMe: this.data.rememberMe,
+        redirect: {name: redirect ? redirect.from.name : 'Home'},
+        success (res) {
+          console.log('Auth Success')
+          // console.log('Token: ' + this.$auth.token())
+          // console.log(res)
+        },
+        error (err) {
+          if (err.response) {
+            // The request was made, but the server responded with a status code
+            // that falls out of the range of 2xx
+            // console.log(err.response.status)
+            // console.log(err.response.data)
+            // console.log(err.response.headers)
+            this.error = err.response.data
+          } else {
+            // Something happened in setting up the request that triggered an Error
+            console.log('Error', err.message)
+          }
+          console.log(err.config)
+        }
+      })
+    }
+  }
+  // filters: {
+  //   json: function (value) {
+  //     console.log(value)
+  //     return value
+  //   }
+  // }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.is-title {
+    text-transform: capitalize;
+}
+</style>