Laravel JWT Auth with Vue.js 2
This post is a refresh of Laravel JWT Auth with Vue.js I posted in September that applies to the 1.x version of Vue.js. Evan You released vue.js version 2 shortly thereafter and this post will cover building the Laravel JSON Web Token based authentication with it.
February 11, 2017 – A lot has changed in the last 4 months with Vue.js and Webpack. Since Vue.js 2.1.x and Webpack 2.2.x were released last month, this post originally published in November has been updated for these new versions.
Included are some notes about refactoring the application from vue.js 1.x to version 2.1. Changes also include using NPM scripts with webpack version 2 for the front end build process instead of Elixir and Browserify.
Environment
For this tutorial, Laravel 5.2 has been installed locally and it is being served by XAMMP on Windows 10.
Command Line Tools
User Model
After setting the database connection parameters in env.php, run the database migration script to create the users, password_resets and migrations tables. In my Laravel application, I have moved the Users class into a Models folder.
php artisan migrate
mkdir app/Models
mv app/User.php app/Models
Edit app/Models/User.php, change the App namespace to App\Models.
User.php
<?php
namespace App\Models;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
...
Throughout this tutorial you will encounter an ellipsis
...in the code examples. These are not a part of the code and are there only to denote code that is being skipped and not applicable to the example. To view the entire file, examine the source code.
Edit, config/auth.php. Update the authentication drivers user provider for the App\Models\User namespace change as follows.
auth.php
'providers' => [
'users' => [
'driver' => 'eloquent',
'model' => App\Models\User::class,
],
...
Webpack Vue.js CLI
A simple webpack vue-loader setup is being used for the front end build process. First step is to install vue-cli globally.
npm install -g vue-cli
If you have an older version of vue-cli, you will need to update it to version 2.8.
npm update -g vue-cli
Using vue-cli from the laravel root directory, install the webpack-simple template into the existing laravel resources folder.
vue init webpack-simple resources
After the webpack-simple template has been installed. Change to the resources directory and run the npm install. This will install vue 2.1.x, vue-loader, vue-template-compiler, webpack 2.2.x and other dependencies. For details, inspect the install manifest resources/package.json.
cd resources
npm i
For example, the vue-cli 2.8.0 release from January, 2017 installs vue 2.1.10, vue-loader 10.0.2, vue-template-compiler 2.1.10 and webpack 2.2.0.
Vue Router and Components
Install the router for vue.js 2.x.
npm i vue-router --save-dev
Create a resources/assets/components folder and add an empty App.vue, Dashboard.vue, Home.vue, Register.vue and Signin.vue component.
mkdir assets/components
touch assets/components/App.vue
touch assets/components/Dashboard.vue
touch assets/components/Home.vue
touch assets/components/Register.vue
touch assets/components/Signin.vue
Add the following code to the App.vue base layout component. The new <[router-link](https://router.vuejs.org/en/api/router-link.html)> component replaces the the deprecated v-link directive from vue.js 1.x.
App.vue
<template>
<div class="panel panel-default">
<div class="panel-heading">
<nav>
<ul class="list-inline">
<li>
<router-link :to="{ name: 'home' }">Home</router-link>
</li>
<li class="pull-right">
<router-link :to="{ name: 'register' }">Register</router-link>
</li>
</ul>
</nav>
</div>
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</template>
Add the following code to the Home.vue component.
Home.vue
<template>
<h1>Laravel 5</h1>
</template>
Add the following code to the Register.vue component. Note the change from version 1.0 of this component. A div has been added at the root of the template since components now must have exactly one root element.
Register.vue
<template>
<div>
<div class="alert alert-danger" v-if="error && !success">
<p>There was an error, unable to complete registration.</p>
</div>
<div class="alert alert-success" v-if="success">
<p>Registration completed. You can now sign in.</p>
</div>
<form autocomplete="off" v-on:submit="register" v-if="!success">
<div class="form-group" v-bind:class="{ 'has-error': error && response.username }">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" v-model="name" required>
<span class="help-block" v-if="error && response.name">{{ response.name }}</span>
</div>
<div class="form-group" v-bind:class="{ 'has-error': error && response.email }">
<label for="email">E-mail</label>
<input type="email" id="email" class="form-control" placeholder="gavin.belson@hooli.com" v-model="email" required>
<span class="help-block" v-if="error && response.email">{{ response.email }}</span>
</div>
<div class="form-group" v-bind:class="{ 'has-error': error && response.password }">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" v-model="password" required>
<span class="help-block" v-if="error && response.password">{{ response.password }}</span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</template>
JavaScript
Create a resources/assets/js folder for the JavaScript.
mkdir assets/js
Create a resources/assets/js/app.js JavaScript file.
touch assets/js/app.js
Add the following code to the app.js file to import vue modules, components and define the router. Exporting will allow other modules in this project to import them.
Note the changes between version 1.0 of app.js.
- router.map has been replaced with an array on the new routes option.
- router is passed to the new Vue instance as option since starting an app with routing no longer requires a special method.
app.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from '../components/App.vue';
import Dashboard from '../components/Dashboard.vue';
import Home from '../components/Home.vue';
import Register from '../components/Register.vue';
import Signin from '../components/Signin.vue';
Vue.use(VueRouter);
export default Vue;
export var router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/register',
name: 'register',
component: Register
}
]
});
new Vue({
el: '#app',
router: router,
render: app => app(App)
});
Web Page
Edit the resources/views/welcome.blade.php template.
Replace the entire contents of the file with this markup.
welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{!! csrf_token() !!}">
<title>Laravel</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="/js/app.js"></script>
</body>
</html>
Webpack
Edit the resources/webpack.config.js entry and output values.
REPLACE
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
...
}
WITH
module.exports = {
entry: './assets/js/app.js',
output: {
path: path.resolve(__dirname, '../public/js'),
publicPath: '/js/',
filename: 'app.js'
},
...
}
Test drive the updated webpack configuration with the npm build script.
npm run build
Your build output should be similar to this. The laravel public folder should now contain js/app.js and a respective js/app.js.map source map.
> resources@ build C:\xampp\htdocs\laravel\resources
> cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 260fd0b01225d3f55a16
Version: webpack 2.2.1
Time: 6031ms
Asset Size Chunks Chunk Names
app.js 118 kB 0 [emitted] main
app.js.map 884 kB 0 [emitted] main
The next page covers Vue Resource for request handling, Form Request Validation, API authorization with JWT Auth, User endpoint and Sign in.