Skip to content

Commit a4b3784

Browse files
fundonfundon
authored
Merge pull request #180 from dhax/vue-auth
integrates vue-auth jwt authentication
2 parents 626dbe3 + 2b34fa9 commit a4b3784

File tree

5 files changed

+150
-6
lines changed

5 files changed

+150
-6
lines changed

‎client/app.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import Vue from 'vue'
22
import axios from 'axios'
3+
import VueAxios from 'vue-axios'
4+
import VueAuth from '@websanova/vue-auth'
35
import NProgress from 'vue-nprogress'
46
import { sync } from 'vuex-router-sync'
57
import App from './App.vue'
@@ -8,8 +10,24 @@ import store from './store'
810
import * as filters from './filters'
911
import { TOGGLE_SIDEBAR } from 'vuex-store/mutation-types'
1012

11-
Vue.prototype.$http = axios
12-
Vue.axios = axios
13+
Vue.router = router
14+
Vue.use(VueAxios, axios)
15+
Vue.use(VueAuth, {
16+
auth: {
17+
request: function (req, token) {
18+
this.options.http._setHeaders.call(this, req, {Authorization: 'Bearer ' + token})
19+
},
20+
response: function (res) {
21+
// Get Token from response body
22+
return res.data
23+
}
24+
},
25+
http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
26+
router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
27+
loginData: { url: 'http://localhost:6789/login', fetchUser: false },
28+
refreshData: { enabled: false }
29+
})
30+
1331
Vue.use(NProgress)
1432

1533
// Enable devtools

‎client/components/layout/Navbar.vue‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
</tooltip>
1818
</a>
1919
</div>
20-
<div class="nav-right is-flex"></div>
20+
<div class="nav-right is-flex">
21+
<router-link v-if="!$auth.check()" to="/login" class="nav-item">Login</router-link>
22+
<a v-if="$auth.check()" @click="logout" class="nav-item">Logout</a>
23+
</div>
2124
</nav>
2225
</div>
2326
</section>
@@ -42,9 +45,21 @@ export default {
4245
sidebar: 'sidebar'
4346
}),
4447
45-
methods: mapActions([
46-
'toggleSidebar'
47-
])
48+
methods: {
49+
...mapActions([
50+
'toggleSidebar'
51+
]),
52+
logout () {
53+
this.$auth.logout({
54+
redirect: 'Home',
55+
makeRequest: false
56+
// params: {},
57+
// success: function () {},
58+
// error: function () {},
59+
// etc...
60+
})
61+
}
62+
}
4863
}
4964
</script>
5065

‎client/router/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export default new Router({
1313
path: '/',
1414
component: require('../views/Home')
1515
},
16+
{
17+
name: 'Login',
18+
path: '/login',
19+
component: require('../views/auth/Login')
20+
},
1621
...generateRoutesFromMenu(menuModule.state.items),
1722
{
1823
path: '*',

‎client/store/modules/menu/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const state = {
2424
name: 'Axios',
2525
path: '/axiosDemo',
2626
meta: {
27+
auth: true,
2728
icon: 'fa-rocket',
2829
link: 'axios/index.vue'
2930
},

‎client/views/auth/Login.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="content has-text-centered">
3+
<h1 class="is-title is-bold">Login</h1>
4+
5+
<div class="columns is-vcentered">
6+
<div class="column is-6 is-offset-3">
7+
<div class="box">
8+
<div v-show="error" style="color:red; word-wrap:break-word;">{{ error }}</div>
9+
<form v-on:submit.prevent="login">
10+
<label class="label">Email</label>
11+
<p class="control">
12+
<input v-model="data.body.username" class="input" type="text" placeholder="email@example.org">
13+
</p>
14+
<label class="label">Password</label>
15+
<p class="control">
16+
<input v-model="data.body.password" class="input" type="password" placeholder="password">
17+
</p>
18+
19+
<p class="control">
20+
<label class="checkbox">
21+
<input type="checkbox" v-model="data.rememberMe">
22+
Remember me
23+
</label>
24+
</p>
25+
26+
<hr>
27+
<p class="control">
28+
<button type="submit" class="button is-primary">Login</button>
29+
<button class="button is-default">Cancel</button>
30+
</p>
31+
</form>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</template>
37+
38+
<script>
39+
export default {
40+
41+
data () {
42+
return {
43+
data: {
44+
body: {
45+
username: null,
46+
password: null
47+
},
48+
rememberMe: false
49+
},
50+
error: null
51+
}
52+
},
53+
mounted () {
54+
if (this.$auth.redirect()) {
55+
console.log('Redirect from: ' + this.$auth.redirect().from.name)
56+
}
57+
// Can set query parameter here for auth redirect or just do it silently in login redirect.
58+
},
59+
methods: {
60+
login () {
61+
var redirect = this.$auth.redirect()
62+
this.$auth.login({
63+
headers: {
64+
'Content-Type': 'application/json'
65+
},
66+
data: this.data.body,
67+
rememberMe: this.data.rememberMe,
68+
redirect: {name: redirect ? redirect.from.name : 'Home'},
69+
success (res) {
70+
console.log('Auth Success')
71+
// console.log('Token: ' + this.$auth.token())
72+
// console.log(res)
73+
},
74+
error (err) {
75+
if (err.response) {
76+
// The request was made, but the server responded with a status code
77+
// that falls out of the range of 2xx
78+
// console.log(err.response.status)
79+
// console.log(err.response.data)
80+
// console.log(err.response.headers)
81+
this.error = err.response.data
82+
} else {
83+
// Something happened in setting up the request that triggered an Error
84+
console.log('Error', err.message)
85+
}
86+
console.log(err.config)
87+
}
88+
})
89+
}
90+
}
91+
// filters: {
92+
// json: function (value) {
93+
// console.log(value)
94+
// return value
95+
// }
96+
// }
97+
98+
}
99+
</script>
100+
101+
<style lang="scss" scoped>
102+
.is-title {
103+
text-transform: capitalize;
104+
}
105+
</style>

0 commit comments

Comments
 (0)