Vue auth + "tymon/jwt-auth": "^0.5.6"

app.js

var Vue = require('vue');
var VueRouter = require('vue-router');
var VueResource = require('vue-resource');

Vue.use(VueRouter);
Vue.use(VueResource);

Vue.config.debug = true;
Vue.http.headers.common['X-CSRF-TOKEN'] = Groundcontrol.csrfToken;
Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('id_token');

// Load the application root instance
var Application = Vue.component('application', require('./components/application'))

// Load the pages
var Home =      Vue.component('home', require('./pages/home/home'));

// Load auth components
var Login =     Vue.component('login', require('./components/auth/login'));
var Signup =    Vue.component('signup', require('./components/auth/signup'));

// Load the router
var Router = new VueRouter({linkActiveClass:'active',hashbang:false,history:true});
Router.mode = 'html5';


Router.map({
    '/': {
        component: Home
    },
    '/login': {
      component: Login
    },
    '/signup': {
      component: Signup
    }
})

Router.redirect({
  '*': '/'
})
// Start router
Router.start(Application, '#application');

    '/signup': {
      component: Signup
    }
})

Router.redirect({
  '*': '/'
})
// Start router
Router.start(Application, '#application');

auth.js

var BASE_URL = 'http://'+window.location.host;
var SIGNUP_URL = BASE_URL+'/users';
var LOGIN_URL = BASE_URL+'/sessions/create';
var USER_URL = BASE_URL+'/sessions/user';

var Auth = {


    /**
     * Login into the application
     *
     * @param  context  login.js
     * @param  creds    credentials from login.js
     */
    login: function(context, creds, redirect) {

        var self = this;

        context.$http.post(LOGIN_URL, creds, function(data) {

            context.$dispatch('user-logged-in', data.token);

        }).error(function(data) {
            
            context.error = data.error;
            context.$dispatch('action-error', data.error);

        });

    },


    /**
     * Signup for an account
     *
     * @param  context  signup.js
     * @param  creds    credentials from signup.js
     */
    signup: function(context, creds) {

        var self = this;

        context.$http.post(SIGNUP_URL, creds, function(data){

            context.$dispatch('user-signed-up');

        }).error(function(data) {

            context.$dispatch('action-error', data.error);

        });

    },


    /**
     * Logout from the application
     *
     * @return {[type]} [description]
     */
    logout: function(context) {
        this.clearToken();
        context.$dispatch('user-logged-out');
    },


    /**
     * Load a user from somewhere
     *
     * @param context application.js
     */
    user: function(context) {
        var self = this;

        context.$http.get(USER_URL, function(data) {

            context.$dispatch('user-loaded', data.user);

        },{ headers: this.getAuthHeader() })
        .error(function(data) {

            context.$dispatch(data.error,'user-not-authenticated');

        });


    },


    /**
     * Check if the user is authenticated
     */
    checkAuth: function(context) {

        var token = localStorage.getItem('id_token')

        if (token) {
            context.$dispatch('user-authenticated', token);
        } else {
            context.$dispatch('user-not-authenticated');
        }

    },


    /**
     * Get the authorization header
     */
    getAuthHeader: function() {
        return {
            'Authorization': 'Bearer ' + localStorage.getItem('id_token')
        };
    },


    /**
     * Set / Get / Clear tokens
     */
    setToken: function(token) {
        localStorage.setItem('id_token', token);
    },

    getToken: function() {
        return localStorage.getItem('id_token');
    },

    clearToken: function() {
        localStorage.removeItem('id_token');
    }
};

module.exports = Auth;

JwtAuthController.php

<?php

namespace App\Http\Controllers\Auth;

use JWTAuth;
use App\Http\Controllers\Controller;
use Tymon\JWTAuth\Exceptions\JWTException;
use Tymon\JWTAuth\Exceptions\TokenExpiredException;
use Tymon\JWTAuth\Exceptions\TokenInvalidException;


class JwtAuthController extends Controller
{


    /**
     * Authenticate by credentials
     */
    public function authenticate()
    {

        $credentials = request()->only('email', 'password');

        try {

            if ( !$token = JWTAuth::attempt($credentials) ) {
                return $this->error('invalid-credentials', 401);
            }

        } catch (JWTException $e) {
            // something went wrong whilst attempting to encode the token
            return $this->error('could-not-create-token', 500);
        }

        return response()->json(compact('token'));

    }


    /**
     * Get the user by jwt token, or return an error
     *
     * @return Response
     */
    public function getAuthenticatedUser()
    {

        try {

            if ( !$user = JWTAuth::parseToken()->authenticate() ) {
                return $this->error('user-not-found', 204);
            }

        } catch (TokenExpiredException $e) {

            return $this->error('token-expired', 401);

        } catch (TokenInvalidException $e) {

            return $this->error('token-invalid', 401);

        } catch (JWTException $e) {

            return $this->error('token-absent', 400);

        }

        // the token is valid and we have found the user via the sub claim
        return response()->json(compact('user'));
    }


    /**
     * Error formatter
     *
     * @param  string  $message
     * @param  integer $statuscode
     *
     * @return \Illuminate\Http\JsonResponse
     */
    private function error($message, $statuscode = 401)
    {
        return response()->json(['error' => $message], $statuscode);
    }
}

login.js

var Auth = require('./auth.js');
var jQuery = require('jquery');
var Login = {

    template: require('./views/login.template.html'),
    data: function() {

        return {
            credentials: {
                email: '',
                password: ''
            },
            emailFilled: false,
            passwordFilled: false,
            error: ''
        }
    },

    methods: {

        /**
         * Submit the login form
         *
         * @return {[type]} [description]
         */
        submit: function() {

            var credentials = {
                email: this.credentials.email,
                password: this.credentials.password
            }

            Auth.login(this, credentials, 'secretquote')

        },

        onInputFocus: function ( event ) {
            jQuery(event.target.parentNode).addClass('input--filled');
        },

        onInputBlur: function( event ) {
            if( jQuery(event.target).val() === '' ) {
                jQuery(event.target.parentNode).removeClass('input--filled');
            }
        }
    }

}

module.exports = Login;

routes.php

Route::post('sessions/create', ['uses' => 'Auth\JwtAuthController@authenticate']);
Route::get('sessions/user', ['uses' => 'Auth\JwtAuthController@getAuthenticatedUser']);

signup.js

var Auth = require('./auth.js');

var Signup = {

    template: require('./views/signup.template.html'),

    data: function() {
        return {
            credentials: {
                username: '',
                password: ''
            },
            error: ''
        }
    },

    methods: {

        /**
         * Submit the signup form
         * 
         * @return {[type]} [description]
         */
        submit: function() {
            var credentials = {
                username: this.credentials.username,
                password: this.credentials.password
            }
            Auth.signup(this, credentials, 'secretquote')
        }
    }

}

module.exports = Signup;

user.js

var Auth = require('./auth.js');

var User = {

    template: require('./views/user.template.html'),

    props: ['auth'],
    methods: {
        logout: function(){
            this.$dispatch('user-logged-out');
        }
    },
    route: {
        canActivate: function() {
            return Auth.user.authenticated
        }
    }
}

module.exports = User;

user.template.html

<div class="AuthUser">

    <div class="AuthUser__welcome" v-if="auth.authenticated">
        <p v-if="auth.user">Welkom {{ auth.user.first_name }} {{ auth.user.last_name }}</p>
    </div>
    <div class="AuthUser__menu">
        <ul class="AuthUser__list">
            <li class="AuthUser__list-item v-cloak--hidden" v-if="!auth.authenticated">
                <a v-link="{ path: '/' }">
                    <span class="icon-login"></span>Inloggen
                </a>
            </li>
            <li class="AuthUser__list-item v-cloak--hidden"
                v-if="false">
                <a v-link="{ path: '/signup' }">
                    <span class="icon-paper-plane"></span>Inschrijven
                </a>
            </li>
            <li class="AuthUser__list-item v-cloak--hidden" v-if="auth.authenticated">
                <a v-link="{ path: '/' }">
                    <span class="icon-speedometer"></span>Dashboard
                </a>
            </li>
            <li class="AuthUser__list-item v-cloak--hidden" v-if="auth.authenticated">
                <a v-link="{ path: '/' }">
                    <span class="icon-settings"></span>Instellingen
                </a>
            </li>
            <li class="AuthUser__list-item v-cloak--hidden" v-if="auth.authenticated">
                <a v-link="{ path: '/' }" @click="logout()">
                    <span class="icon-logout"></span>Uitloggen
                </a>
            </li>
        </ul>
    </div>

</div>