0.0.2-beta • Published 7 years ago
vauth v0.0.2-beta
vAuth
This is Vue Auth v0.0.2-beta
Installation
npm install --save vauth vue vue-resource vue-router vuex
./index.js
/** Dependencies **/
import Vue from 'vue';
import VueResource from 'vue-resource';
import vAuth from 'vauth';
/** App config **/
import store from './store';
import router from './router';
/** Vue use **/
Vue.use(VueResource);
Vue.use(vAuth, {});
Vue.http.options.root = 'http://localhost:8080/api';
export default new Vue({
el: '#app',
store,
router,
template: '<router-view></router-view>'
});
./store/index.js
/** Dependencies **/
import Vue from 'vue';
import Vuex from 'vuex';
/** Vue use **/
Vue.use(Vuex);
export default new Vuex.Store({
state: {
currentUser: null,
currentToken: null
},
actions: {},
getters: {
getCurrentUser(state){
return state.currentUser;
},
getCurrentToken(state){
return state.currentToken;
}
},
mutations: {
attachCurrentUser(state, currentUser){
state.currentUser = currentUser;
},
attachCurrentToken(state, currentToken){
state.currentToken = currentToken;
}
}
});
Example usage
Now you can use vAuth in components.
import Vue from 'vue';
import {Component} from 'vue-decorators';
@Component
export default class Login extends Vue {
credentials = {
username: 'admin',
password: 'admin'
};
loginHandler(){
this
.$auth
.signIn({
credentials: this.credentials
})
.then(() => { ... })
.catch((c) => { ... });
}
}
Methods
All methods are available in the properties of $auth
in the context of components.
user
If a user is logged on to the data available after the call to the $auth.user()
.
<template>
<div v-if="$auth.user()">
Hello {{ $auth.user().username }}
</div>
</template>
fetch
If you want to fetch the data of current user can call a method this.$auth.fetch()
.
export default {
created(){
this
.$auth
.fetch()
.then(() => { ... })
.catch(() => { ... });
}
};
refresh
export default {
methods: {
refresh(){
this
.$auth
.refresh()
.then(() => { ... })
.catch(() => { ... });
}
}
};
signIn
export default {
methods: {
signIn(){
this
.$auth
.signIn({
credentials: {
username: '...',
password: '...'
}
})
.then(() => { ... })
.catch(() => { ... });
}
}
};
signUp
export default {
methods: {
signUp(){
this
.$auth
.signUp({
body: {
email: '',
username: '...',
password: '...'
}
})
.then(() => { ... })
.catch(() => { ... });
}
}
};
logOut
<template>
<div v-if="$auth.user()">
<a @click="$auth.logOut">Log out</a>
</div>
</template>
hasRole
<template>
<div v-if="$auth.hasRole('ADMIN')">
<a href="...">
Dashboard for admins
</a>
</div>
</template>
License
MIT