Notification of features

Important Note
Aug. 20, 2017

CRUD en Laravel Parte 2: Login y Middleware Auth

 

En esta ocasión vamos a ver como hacer un login, y proteger vistas para que sólo los usuarios logeados puedan ver la página solicitada y al mismo tiempo una vista para crear usuarios. Ahora tenemos que cambiar de repositorio al brach final-project.

Ahora solo tenemos que modificar el archivo web.php y agregar ->middleware('auth') dentro de la carpeta routes: routes > web.php

// Añadimos middleware auth al final
Route::get('/', function () {
    return view('welcome');
})->middleware('auth');

 

php artisan make:auth = magia

Cuando vi esto me dije: "No puede ser", ahora solo tenemos que escribir en la terminal y verán la magia de laravel.

php artisan make:auth

 

Esto nos crea todo, si nos crea, los routes, controllers y hasta las views de login y register, eso si basado en Bootstrap, nosotros podemos modificarlos a nuestra manera. Si ahora vamos a:

http://localhost:8000/ nos tiene que redireccionar a /login/.

 

Ahora sólo debemos eliminar la hola de estilo app.css y agregar lo siguiente antes de la etiqueta head del archivo: resources > layouts > app.blade.php

    <link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/ionicons.min.css') }}" rel="stylesheet">

 

Recuerda eliminar la siguiente línea de css:

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

 

Ahora tenemos que hacer lo mismo para todos los archivos JavaScript en la parte de abajo de la siguiente manera:

  1. Eliminamos el script app.js
  2. Pegamos el siguiente código:
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/script.min.js') }}"></script>
    <script src="{{ asset('bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/validator.min.js') }}"></script>

 

El archivo apps.js es generado automáticamente por webpack que lo veremos más adelante.

 

Ahora tenemos que modificar las views de login y register.

Vamos a modificar el archivo resources > views > auth > login.blade.php

Lo que vamos hacer es reemplazar el <form> por este:

 

                    <form class="form-horizontal" data-toggle="validator" method="POST" action="{{ route('login') }}">
                        {{ csrf_field() }}

                        <div class="form-group has-feedback">
                          <label for="email" class="col-md-4 control-label">E-Mail Address</label>
                          <div class="col-md-6">
                            <input type="email" class="form-control" name="email" id="email"
                              placeholder="Enter a valid email:" required autofocus>
                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            <div class="help-block with-errors"></div>
                          </div>
                        </div>

                        <div class="form-group has-feedback">
                          <label for="password" class="col-md-4 control-label">Password</label>
                          <div class="col-md-6">
                            <input type="password" class="form-control" name="password" id="password" placeholder="Enter a password:" required>
                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            <div class="help-block with-errors"></div>
                          </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>

                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Forgot Your Password?
                                </a>
                            </div>
                        </div>
                    </form>

 

Con este nuevo form agregamos todo lo necesario para usar validator.min.js que son unas validaciones customizadas para Bootstrap.

 

Register.blade.php

Ahora tenemos que reemplazar de igual manera el register.blade.php por el siguiente form:

                    <form class="form-horizontal" data-toggle="validator" method="POST" action="{{ route('register') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                            <label for="name" class="col-md-4 control-label">Name</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>

                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

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

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Register
                                </button>
                            </div>
                        </div>
                    </form>

 

Ahora ya tenemos el login y register completo, bien ahora solo tenemos que ir al master.blade.php y donde dice Jhon Doe tenemos que mostrar el nombre del usuario logeado, para eso lo reeemplazamos por:

{{ Auth::user()->name }}

 

Al hacer Auth de laravel la url por defecto es /home/ nosotros la podemos modificar en el archivo la siguiente línea:

app > Http > Controllers > Auth > LoginController.php

// cambiamos /home por /
// protected $redirectTo = '/home';
protected $redirectTo = '/';

 

Hacemos lo mismo en RegisterController.php  con la variable $redirectTo ahora ya casi estamos listos sólo nos falta hacer la redirección del logout y el form, ahora tenemos que agregar en master.blade.php por la línea #88:

// cambiar la siguiente línea:
// <a href="#" class="btn btn-default btn-flat">Sign out</a>

// por esta otra:

<a href="{{ route('logout') }}"
    onclick="event.preventDefault();
             document.getElementById('logout-form').submit();">
    Logout
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
    {{ csrf_field() }}
</form>

 

Tags: laravel backend