vue-authenticate #110

auth.js

// File: store/modules/auth.js

import authProvider from '../../providers/authenticate'
import http from '../../providers/http'

// You can use it as state property
const state = {
    isAuthenticated: false,
    user: null
};

const getters = {
    isAuthenticated () {
        return authProvider.isAuthenticated()
    },
    user () {
        return state.user
    }
};

const mutations = {
    isAuthenticated (state, payload) {
        state.isAuthenticated = payload.isAuthenticated
    },
    user (state, payload) {
        state.user = payload;
    }
};

const actions = {

    // Perform VueAuthenticate login using Vuex actions
    login (context, payload) {

        return new Promise((resolve, reject) => {
            authProvider.login(payload.credentials).then((response) => {


                    context.commit('isAuthenticated', {
                        isAuthenticated: authProvider.isAuthenticated()
                    });

                    http.get('/auth/user')
                        .then(function (response) {
                            context.commit('user', response.data);

                            resolve();
                        });

            })
            .catch((err) => {
                reject(err);
            });
        });

    }
};

export default {
    state,
    getters,
    actions,
    mutations
}

authenticate.js

// File: providers/authenticate.js

import Vue from 'vue'
import { VueAuthenticate } from 'vue-authenticate'
import http from "./http";

export default new VueAuthenticate(Vue.prototype.$http, {
    loginUrl: 'auth/user/login',
    tokenName: 'access_token'
});

authorize.js

// File: providers/authorize.js

import Vue from "vue";
import auth from './authenticate'
import { VueAuthorize } from 'vue-authorize'

import IsAuthorizedComponent from "vue-authorize/src/component";
import IsAuthorizedDirective from "vue-authorize/src/directive";


const authorize = new VueAuthorize(auth, {
    roles: {
        user: {
            handler: function () {

                console.log('authorize.js 10 => user');

                return this.$auth.isAuthorized()
            },
            permissions: []
        },
        guest: {
            handler: function () {

                console.log('authorize.js 19 => guest');

                return !this.$auth.isAuthorized()
            },
            permissions: []
        }
    },

    permissions: {}
});

Vue.directive('isAuthorized', IsAuthorizedDirective);
Vue.component('isAuthorized', IsAuthorizedComponent);

Object.defineProperties(Vue.prototype, {
    $authorize: {
        get() {
            return authorize
        }
    }
});

export default authorize;

https.js

// File: providers/http.js

import Vue from "vue";
import axios from "axios/index";
import VueAxios from "vue-axios";

Vue.use(VueAxios, axios);
Vue.axios.defaults.baseURL = 'http://local.test';

export default Vue.axios;

index.js

// File: store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import auth from './modules/auth'

export default new Vuex.Store({
    modules: {
        auth
    },
});

Login.vue

// Component: Login.vue
 data: () => ({
            credentials: {
                username: '',
                password: '',
            },
            errors: {},
            loading:false
        }),
methods : {
            login: function () {

                this.errors = {};
                this.loading = true;
                this.$store.dispatch('login', {credentials: this.credentials})
                    .then(() => {
                        this.loading = false;
                        this.$router.push('/');
                    })
                    .catch((e) => {

                        if (e.response.status == 422) {
                            this.errors = e.response.data.errors;
                        } else if (e.response.status == 401) {
                            this.errors.message = 'Kein Benutzer mit diesen Angaben gefunden.'
                        }

                        this.loading = false;
                    });
            }
        }

router.js

// File: router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import Login from '../pages/Login';
import Dashboard from '../pages/Dashboard';
import '../providers/authorize';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        component: Dashboard,
        meta: {
            permissions: {
                roles: ['user'],
                redirectTo: '/login'
            }
        }
    },
    {
        path: '/login',
        component: Login,
        meta: {
            permissions: {
                roles: ['guest'],
                redirectTo: '/'
            }
        }
    },
];

export default new VueRouter({
    routes // short for `routes: routes`
});