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