如何将使用 Laravel Livewire 收集的数据发送到 Fortify？

Question

我对 Vue.js 一点也不熟悉，所以用 Livewire 找到了一个很好的替代品。

我必须解决的挑战是使用 Fortify + Livewire 在我的网站上进行用户友好的注册。注册过程是一个多步骤的过程，取决于用户做出的选择，它将加载相关字段。

到目前为止，我通过在 FortifyServiceProvider.php 文件中添加以下代码来设置 Fortify 视图：

Fortify::loginView(function () {
    return view('auth.login');
});

Fortify::registerView(function () {
    return view('auth.register');
});

auth/login.blade.php 视图加载 livewire 组件，它基本上是一个表单：

<form action="{{ route('register') }}" method="POST" wire:submit.prevent="submit">
    /**
    * Here would go the inputs that must be shown depends on what users choice 
    * (is it an ordinar user or a company)
    */
    <button type="submit">Save<button/>
</form>

可以通过将$step 属性添加到Register.php 类中来解决多形式挑战：

class RegisterForm extends Component
{
    public $step;

    public function mount()
    {
        $this->step = 0;
    }

    public function submit()
    {
        if ($this->step < 3) {
            $this->step++;           
        } else {
            // pass all the data to the fortify register method
            // <-- Here is my trouble!
        }
    }
}

通过每个注册步骤 ($this->step++) 将递增。

对我来说相当复杂的最重要的事情是如何防止表单提交进行验证+表单更改以及最终所有数据集通过 Fortify 注册过程？

Answer 1

查看fortify Controller进行注册

public function store(Request $request, CreatesNewUsers $creator): RegisterResponse
    {
        event(new Registered($user = $creator->create($request->all())));
        $this->guard->login($user);
        return app(RegisterResponse::class);
    }

T

use Illuminate\Auth\Events\Registered;
use Illuminate\Support\Facades\Auth;
use Laravel\Fortify\Contracts\CreatesNewUsers;
use Livewire\Component;

class Register extends Component
{
    public $name;
    public $email;
    public $password;
    public $password_confirmation;

    public function submit(CreatesNewUsers $creator)
    {
        event(new Registered($user = $creator->create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'password_confirmation' => $this->password_confirmation,
        ])));

        Auth::guard()->login($user);

        $this->redirect('home');
    }

    public function render()
    {
        return view('livewire.register');
    }
}

这样的事情将适用于您的用例。

您仍在使用强化操作并仍在触发事件

Answer 2

响应是使用应用容器

<?php

use Illuminate\Auth\Events\Registered;
use Illuminate\Support\Facades\Auth;
use App\Actions\Fortify\CreateNewUser;
use Livewire\Component;

class Register extends Component
{
    public $name;
    public $email;
    public $password;
    public $password_confirmation;
    


    public function submit()
    {
        event(new Registered($user = app(CreateNewUser::class)->create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'password_confirmation' => $this->password_confirmation,
        ])));

        Auth::guard()->login($user);

        $this->redirect('home');
    }

    public function render()
    {
        return view('livewire.register');
    }
}

Answer 3

响应是通过在 Livewire 组件的挂载方法中注入 Fortify CreateNewUser 动作来使用dependency injection。

use Illuminate\Auth\Events\Registered;
use Illuminate\Support\Facades\Auth;
use App\Actions\Fortify\CreateNewUser;
use Livewire\Component;

class Register extends Component
{
    public $name;
    public $email;
    public $password;
    public $password_confirmation;
    
    protected $creator;

    public function mount(CreateNewUser $creator)
    {
        $this->creator = $creator;
    }

    public function submit()
    {
        event(new Registered($user = $this->creator->create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'password_confirmation' => $this->password_confirmation,
        ])));

        Auth::guard()->login($user);

        $this->redirect('home');
    }

    public function render()
    {
        return view('livewire.register');
    }
}

Answer 4

你可以使用刀片示例

@if($step > 3)
     <input name="name" type="text">
@endif