Vue.js code, made in a prototype project. Saved here just for remembering

.Vue.js Code

Vue.js code, made in a prototype project. Saved here just for remembering

adminPage.vue

<style>

</style>

<template>
    Olá admin!

    <a href="javascript:void(0)" @click.prevent="logout">Logout</a>
</template>

<script type="text/ecmascript-6">
    var $ = require('jquery');
    var config = require('./../js/config.js');

    module.exports = {
        data: function(){
            return {};
        },
        methods: {
            logout(){
                var self = this;
                $.post('api/auth/logout').then(() => {
                    self.$route.router.go({ path: '/' });
                });
            }
        }
    }
</script>

app.js

//Requires
var Vue = require('vue');
var VueRouter = require('vue-router');
window.$ = window.jQuery = require('jquery'); // precisa ser global para os plugins funcionarem
require('bootstrap'); // não retorna nada. Só adiciona funções no jQuery
var config = require('./config');

//Setup
$.ajaxSetup({
    headers: {
        'X-XSRF-TOKEN': config.getXSRFToken()
    },
    beforeSend: function(jqXhr, settings){
        settings.url = config.getRootURL() + "/" + settings.url;
    }
});

//Usuário
window.user = null;

//Vue Magic
Vue.use(VueRouter);

var router = new VueRouter();

router.beforeEach(transition => {
    console.log('beforeEach called to '+transition.to.path);
    if(transition.to.auth) {
        return $.get('api/auth/logged').then(user => {
            if (user) {
                window.user = user;
                return true;
            }
            else transition.redirect({path: '/'});
        });
    }else
        return true;
});

router.map({
    '/': {
        component: require('./../components/loginForm.vue')
    },
    '/admin': {
        component: require('./../components/adminPage.vue'),
        auth: true
    },
    '/home': {
        component: require('./../components/userHomePage.vue'),
        auth: true
    }
});

// precisa ser Vue.extend mesmo. É isso que o router.start aceita
// Me lembro que achei problemas quando usei o new Vue
// O Vue até manda um warning
// OK :(
var App = Vue.extend({
    data: function() {
        return {

        }
    }
});

router.start(App, '#app');

config.js

var $ = require('jquery');
var cookies = require('js-cookie');

module.exports = {
    getRootURL: function() {
        return $('meta[name=root-url]').attr('content');
    },
    getXSRFToken: function(){
        return cookies.get('XSRF-TOKEN');
    }
    
};

loginForm.vue

<style>

</style>

<template>

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Login</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="" @submit.prevent="login">

                        <div class="form-group">
                            <label class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input type="email" v-model="credentials.email" id="login-email" class="form-control" name="email">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password" id="login-password" v-model="credentials.password">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember"> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary" data-loading-text="Carregando...">
                                    <i class="fa fa-btn fa-sign-in"></i>Login
                                </button>

                                <a class="btn btn-link" href="web/password/reset">Forgot Your Password?</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    var $ = require('jquery');

    module.exports = {
        data: function(){
            return {
                credentials: {
                    email: '',
                    password: ''
                }
            }
        },
        methods: {
            login: function(){
                var self = this;
                var jquery_self = $(self.$el);
                $("[type=submit]",jquery_self).button('loading');

                $.post('api/auth/login', this.credentials)
                .done(function(user){

                    if(user.level == 0)
                        self.$route.router.go({path:'admin'});
                    else
                        self.$route.router.go({path:'home'});

                })
                .fail(function(response){
                    switch(response.status){
                        case 401: self.loginError(response);break;
                        case 422: self.displayError(response);break;
                        case 500:
                        default: alert(response.responseText);
                    }
                    $("[type=submit]",jquery_self).button('reset');
                });
            },
            loginError: function(response){
                alert(response.responseText);
            },
            displayError: function(response){
                alert(response.responseJSON);
            }
        }
    }
</script>

userHomePage.vue

<style></style>

<template>

    <h1>HOME PAGE USUARIO</h1>
    <h4>{{user}} <a href="javascript:void(0)" @click.prevent="logout">logout</a></h4>


</template>

<script type="text/ecmascript-6">
    var $ = require('jquery');

    module.exports = {
        data: function(){
            return {}
        },
        methods:{
            logout(){
                var self = this;
                $.post('api/auth/logout').then(() => {
                    self.$route.router.go({ path: '/' });
                });
            }
        },
        computed: {
            user:function(){
                return window.user.name;
            }
        }
    }
</script>