Iniciando SPA

Author: NiltonMorais

composer.json

@@ -6,7 +6,9 @@
     "type": "project",
     "require": {
         "php": ">=5.6.4",
-        "laravel/framework": "5.3.*"
+        "laravel/framework": "5.3.18",
+        "tymon/jwt-auth": "dev-develop",
+        "barryvdh/laravel-cors": "^0.8.5"
     },
     "require-dev": {
         "fzaninotto/faker": "~1.4",

composer.lock

@@ -167,6 +167,8 @@
          * Package Service Providers...
          */
         Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
+        Barryvdh\Cors\ServiceProvider::class,
+
         //
 
         /*

config/app.php

@@ -0,0 +1,21 @@
+<?php
+
+return [
+    /*
+     |--------------------------------------------------------------------------
+     | Laravel CORS
+     |--------------------------------------------------------------------------
+     |
+     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
+     | to accept any value.
+     |
+     */
+    'supportsCredentials' => false,
+    'allowedOrigins' => ['*'],
+    'allowedHeaders' => ['*'],
+    'allowedMethods' => ['*'],
+    'exposedHeaders' => [],
+    'maxAge' => 0,
+    'hosts' => [],
+];
+

config/cors.php

@@ -0,0 +1,16 @@
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <div class="panel-heading">Meu Dashboard</div>
+                <div class="panel-body">
+                    Meu conteúdo
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default{
+    }
+</script>

resources/assets/spa/js/components/Dashboard.vue

@@ -4,17 +4,27 @@
             <div class="col s8 offset-s2 z-depth-2">
                 <h3 class="center">Code Financeiro</h3>
 
+                <div class="row" v-if="error.error">
+                    <div class="col s12">
+                        <div class="card-panel red">
+                            <span class="white-text">{{error.message}}</span>
+                        </div>
+                    </div>
+                </div>
+
                 <form method="POST" @submit.prevent="login()">
                     <div class="row">
                         <div class="input-field col s12">
-                            <input id="email" type="email" class="validate" name="email" v-model="user.email" required autofocus>
+                            <input id="email" type="email" class="validate" name="email" v-model="user.email" required
+                                   autofocus>
                             <label for="email" class="active">E-Mail</label>
                         </div>
                     </div>
 
                     <div class="row">
                         <div class="input-field col s12">
-                            <input id="password" type="password" class="validate" name="password" v-model="user.password" required>
+                            <input id="password" type="password" class="validate" name="password"
+                                   v-model="user.password" required>
                             <label for="password" class="active">Senha</label>
                         </div>
                     </div>
@@ -30,18 +40,36 @@
     </div>
 </template>
 <script type="text/javascript">
+    import Auth from "../services/auth";
     export default{
         data(){
             return {
                 user: {
                     email: '',
                     password: ''
+                },
+                error: {
+                    error: false,
+                    message: ''
                 }
             }
         },
         methods: {
             login(){
-
+                Auth.login(this.user.email, this.user.password)
+                        .then(()=> {
+                            this.$router.go({name: 'dashboard'});
+                        })
+                        .catch((responseError) => {
+                            switch(responseError.status){
+                                case 401:
+                                    this.error.message = responseError.data.message;
+                                    break;
+                                default:
+                                    this.error.message = "Login failed.";
+                            }
+                            this.error.error = true;
+                        });
             }
         }
     }

resources/assets/spa/js/components/Login.vue

@@ -1,8 +1,13 @@
 import LoginComponent from './components/Login.vue';
+import DashboardComponent from './components/Dashboard.vue';
 
 export default{
     '/login': {
         name: 'auth.login',
         component: LoginComponent
+    },
+    '/dashboard': {
+        name: 'dashboard',
+        component: DashboardComponent
     }
 }

resources/assets/spa/js/router.map.js

@@ -0,0 +1,11 @@
+import {Jwt} from "./resources";
+import LocalStorage from "./localStorage";
+
+export default {
+    login(email,password){
+        return Jwt.accessToken(email, password).then((response)=>{
+            LocalStorage.set('token',response.data.token);
+            return response;
+        });
+    }
+}

resources/assets/spa/js/services/auth-compiled.js

@@ -0,0 +1,19 @@
+export default {
+    set(key, value){
+        window.localStorage[key] = value;
+        return window.localStorage[key];
+    },
+    get(key, defaultValue = null){
+        return window.localStorage[key] || defaultValue;
+    },
+    setObject(key, value){
+        window.localStorage[key] = JSON.stringify(value);
+        return this.getObjetct(key);
+    },
+    getObjetct(key){
+        return JSON.parse(window.localStorage[key] || null);
+    },
+    remove(key){
+        window.localStorage.removeItem(key);
+    }
+}

resources/assets/spa/js/services/auth-compiled.js.map

@@ -0,0 +1,8 @@
+export class Jwt{
+    static accessToken(email, password){
+        return Vue.http.post('access_token',{
+            'email': email,
+            'password': password
+        });
+    }
+}

resources/assets/spa/js/services/auth.js

@@ -1,4 +1,5 @@
 require('materialize-css');
 window.Vue = require('vue');
-require('./router');
-
+require('vue-resource');
+Vue.http.options.root = "http://localhost:8000/api";
+require('./router');

resources/assets/spa/js/services/localStorage-compiled.js

@@ -13,10 +13,8 @@
 |
 */
 
-Route::get('/user', function (Request $request) {
-    return $request->user();
-})->middleware('auth:api');
-
-Route::post('access_token','Api\AuthController@accessToken');
-Route::post('refresh_token','Api\AuthController@refreshToken');
-Route::post('logout','Api\AuthController@logout')->middleware('auth:api');
+Route::group(['middleware' => 'cors'],function(){
+    Route::post('access_token','Api\AuthController@accessToken');
+    Route::post('refresh_token','Api\AuthController@refreshToken');
+    Route::post('logout','Api\AuthController@logout')->middleware('auth:api');
+});