2

Antes en laravel se podía poner @csrf despues del inicio de form yo encontré un wizard o step con laravel 8 y livewire, estuve analizando a detalle la función de cada paso, pero encontré una gran duda no hay etiquetas form de apertura ni cierre y no sé donde colocar la protección csrf.

El modelo es el siguiente:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

 class Product extends Model
{
use HasFactory;

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name', 'amount', 'description', 'status', 'stock'
];
}

En la siguiente ruta app/Http/Livewire/Wizard.php tengo el siguiente archivo con el siguiente código:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Product;

class Wizard extends Component
{
public $currentStep = 1;
public $name, $amount, $description, $status = 1, $stock;
public $successMessage = '';

/**
 * Write code on Method
 *
 * @return response()
 */
public function render()
{
    return view('livewire.wizard');
}

/**
 * Write code on Method
 *
 * @return response()
 */
public function firstStepSubmit()
{
    $validatedData = $this->validate([
        'name' => 'required|unique:products',
        'amount' => 'required|numeric',
        'description' => 'required',
    ]);

    $this->currentStep = 2;
}

/**
 * Write code on Method
 *
 * @return response()
 */
public function secondStepSubmit()
{
    $validatedData = $this->validate([
        'stock' => 'required',
        'status' => 'required',
    ]);

    $this->currentStep = 3;
}

/**
 * Write code on Method
 *
 * @return response()
 */
public function submitForm()
{
    Product::create([
        'name' => $this->name,
        'amount' => $this->amount,
        'description' => $this->description,
        'stock' => $this->stock,
        'status' => $this->status,
    ]);

    $this->successMessage = 'Product Created Successfully.';

    $this->clearForm();

    $this->currentStep = 1;
}

/**
 * Write code on Method
 *
 * @return response()
 */
public function back($step)
{
    $this->currentStep = $step;    
}

/**
 * Write code on Method
 *
 * @return response()
 */
public function clearForm()
{
    $this->name = '';
    $this->amount = '';
    $this->description = '';
    $this->stock = '';
    $this->status = 1;
}
}

En la vistas tengo el siguiente código que es digamos que los pasos (step) con cada campo del wizard:

<div>

 @if(!empty($successMessage))
<div class="alert alert-success">
 {{ $successMessage }}
 </div>
 @endif

<div class="stepwizard">
<div class="stepwizard-row setup-panel">
    <div class="stepwizard-step">
        <a href="#step-1" type="button" class="btn btn-circle {{ $currentStep != 1 ? 'btn- 
  default' : 'btn-primary' }}">1</a>
        <p>Step 1</p>
    </div>
    <div class="stepwizard-step">
        <a href="#step-2" type="button" class="btn btn-circle {{ $currentStep != 2 ? 'btn- 
  default' : 'btn-primary' }}">2</a>
        <p>Step 2</p>
    </div>
    <div class="stepwizard-step">
        <a href="#step-3" type="button" class="btn btn-circle {{ $currentStep != 3 ? 'btn- 
 default' : 'btn-primary' }}" disabled="disabled">3</a>
        <p>Step 3</p>
    </div>
</div>
</div>

<div class="row setup-content {{ $currentStep != 1 ? 'displayNone' : '' }}" id="step-1">
    <div class="col-xs-12">
        <div class="col-md-12">
            <h3> Step 1</h3>

            <div class="form-group">
                <label for="title">Product Name:</label>
                <input type="text" wire:model="name" class="form-control" id="taskTitle">
                @error('name') <span class="error">{{ $message }}</span> @enderror
            </div>
            <div class="form-group">
                <label for="description">Product Amount:</label>
                <input type="text" wire:model="amount" class="form-control" 
    id="productAmount"/>
                @error('amount') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="description">Product Description:</label>
                <textarea type="text" wire:model="description" class="form-control" 
     id="taskDescription">{{{ $description ?? '' }}}</textarea>
                @error('description') <span class="error">{{ $message }}</span> @enderror
            </div>

            <button class="btn btn-primary nextBtn btn-lg pull-right" 
   wire:click="firstStepSubmit" type="button" >Next</button>
        </div>
    </div>
</div>
<div class="row setup-content {{ $currentStep != 2 ? 'displayNone' : '' }}" id="step-2">
    <div class="col-xs-12">
        <div class="col-md-12">
            <h3> Step 2</h3>

            <div class="form-group">
                <label for="description">Product Status</label><br/>
                <label class="radio-inline"><input type="radio" wire:model="status" 
    value="1" {{{ $status == '1' ? "checked" : "" }}}> Active</label>
                <label class="radio-inline"><input type="radio" wire:model="status" 
    value="0" {{{ $status == '0' ? "checked" : "" }}}> DeActive</label>
                @error('status') <span class="error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="description">Product Stock</label>
                <input type="text" wire:model="stock" class="form-control" 
   id="productAmount"/>
                @error('stock') <span class="error">{{ $message }}</span> @enderror
            </div>

            <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" 
   wire:click="secondStepSubmit">Next</button>
            <button class="btn btn-danger nextBtn btn-lg pull-right" type="button" 
  wire:click="back(1)">Back</button>
        </div>
    </div>
   </div>
    <div class="row setup-content {{ $currentStep != 3 ? 'displayNone' : '' }}" id="step-3">
    <div class="col-xs-12">
        <div class="col-md-12">
            <h3> Step 3</h3>

            <table class="table">
                <tr>
                    <td>Product Name:</td>
                    <td><strong>{{$name}}</strong></td>
                </tr>
                <tr>
                    <td>Product Amount:</td>
                    <td><strong>{{$amount}}</strong></td>
                </tr>
                <tr>
                    <td>Product status:</td>
                    <td><strong>{{$status ? 'Active' : 'DeActive'}}</strong></td>
                </tr>
                <tr>
                    <td>Product Description:</td>
                    <td><strong>{{$description}}</strong></td>
                </tr>
                <tr>
                    <td>Product Stock:</td>
                    <td><strong>{{$stock}}</strong></td>
                </tr>
            </table>

            <button class="btn btn-success btn-lg pull-right" wire:click="submitForm" 
    type="button">Finish!</button>
            <button class="btn btn-danger nextBtn btn-lg pull-right" type="button" 
 wire:click="back(2)">Back</button>
        </div>
    </div>
</div>

por ultimo tengo lo siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Example - ItSolutionStuff.com</title>
@livewireStyles
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<link href="{{ asset('wizard.css') }}" rel="stylesheet" id="bootstrap-css">
</head>
<body>

<div class="container">

<div class="card">
  <div class="card-header">
    Wizard o step formulario
  </div>
  <div class="card-body">
    <livewire:wizard />
  </div>
</div>
    
 </div>

 </body>

 @livewireScripts

 </html>

La única idea fue colocar lo siguiente en en el archivo wizard.blade.php despues del primer DIV @csrf y en el ultimo submit de Finish! lo siguiente name="_token" value="{{ csrf_token() }}"

¿Cómo saber si está bien la protección de @csrf?

1 respuesta 1

1

Comentarios relevantes:

  • En los componentes de Livewire todas las propiedades declaradas como públicas estarán automáticamente disponibles al front ojo con eso
  • La documentación no menciona (o al menos no lo he visto) el uso explícito o necesario de un token al estilo de Laravel con la directiva @csrf por ejemplo, pero....
    • Lo que si hace es que por cada petición anexará al payload de la misma un checksum con una estructura como la siguiente:

        checksum: "200ef..90b17d......................................"
        data: {propiedadModelo: []}
        dataMeta: {models: {propiedadModelo: {............................................}}}
        htmlHash: "77b6..........."
      

Donde:

  • Si un hash del payload no coincidiera con el checksum entonces arrojaría un error.

Eso es por un lado, sin embargo te invito a que revises la documentación en el enlace provisto al final para profundizar mas en los siguientes temas:

  • Ciclo de vida de los componentes (los diagramas son muy explicativos)
  • El segundo factor que dicho framework tiene presente para temas de seguridad

Te invito a que revises mas a detalle el código fuente de esta herramienta a través de las siguientes clases:

  • app\vendor\livewire\livewire\src\HydrationMiddleware.php

Referencias

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.