0

Livewire を使用して Laravel プロジェクトをビルドしています。また、Fortify を使用してセキュリティ/認証レイヤーを実装しています。

さまざまな理由から、私は Jetstream を使用していません。そうは言っても、Jetstream がその作業を行うために採用している非常に便利な機能とテクニックがいくつかあることは明らかです。そのため、真の創造性の精神で、Jetstream の方法の例として次の「パスワードの更新」フォームを「借用」しました。 Livewire を使用して Fortify と連携します。

この HTML テンプレートは、フォームを作成する実際の HTML コードを簡略化したものですが、重要なことだけに集中できるように、スタイリングやラベル付けの複雑さなどはすべて取り除いています。

<!-- update-password-form.blade.php (Livewire Template) -->
<form wire:submit.prevent="updatePassword">
    <input id="current_password" type="password" name="current_password" required="true" />
    <input id="password" type="password" name="password" required="true" />
    <input id="password_confirmation" type="password" name="password_confirmation" required="true" />
    <button type="submit">Change Password</button>
</form>

ご覧のとおり、Livewire はフォームのデフォルトの送信を防ぎ、updatePassword()Livewire クラスの関数にリダイレクトします。ここでわかるように、関数は次のようになります。

/**
 * Update the user's password.
 *
 * @param  \Laravel\Fortify\Contracts\UpdatesUserPasswords  $updater
 * @return void
 */
public function updatePassword(UpdatesUserPasswords $updater)
{
    $this->resetErrorBag();

    $updater->update(Auth::user(), $this->state);

    $this->state = [
        'current_password' => '',
        'password' => '',
        'password_confirmation' => '',
    ];

    $this->emit('saved');
}

これはすべてうまくいくようです。私 (ユーザー) が[Change Password]Livewire を押すと、(ユーザーがフォームを二重に送信するのを防ぐために) フォームが非アクティブに設定され、Laravel/Livewire からの応答が受信されると、フォームが再び有効になります。と・・・まぁそれだけです。

問題は、どのデータを送信してもかまわないことです。すべて正しい値を入力すると、パスワードが更新されません! 間違って入力current_passwordしてもエラーにはなりません。current_passwordと が一致しない正しいものを送信するpasswordとpassword_confirmation、(エンド ユーザーとして) 同じ「何も起こらなかった」という経験が得られます。ブラウザの開発ツールの「ネットワーク」タブを確認すると、詳細に明らかなエラーが報告されることなく、毎回有効な 200 の応答が得られます。dd($this)スタイル デバッグを入れると、JSON 応答が Livewire オブジェクトを返すため、PHP 関数が呼び出されていることがわかります。

したがって、私が持っている質問は次のとおりです...

Fortify フレームワークはどのようにエラーを管理し、ユーザーに有用なフィードバックを提供するために (Livewire で) どのようにそれらをキャッチする必要がありますか?

ErrorBag(コードの最初の行でリセットされます) は何らかの形で$updater->update()関数に取り込まれますか?

さらに、このソリューションを Jetstream プロジェクトからコピーしました (申し訳ありませんが、借りました)。これはまた、Jetstream インターフェースが (エンドユーザーの観点から) 同様に直感的でないことを意味するのでしょうか? Jetstream プロジェクトで見逃した上位概念はありますか?

4

1 に答える 1

1

私は愚かだった。エラー バッグがビューに返されます。テンプレートに応答を表示するアウトレットがなかっただけです。必要なのは、エラーが存在する場合にフィールドを表示するための条件label(または aspanまたは a ) だけでした。div

<form wire:submit.prevent="updatePassword">
    <input id="current-password" type="password" name="current_password" required="true" />
    @error('current_password')
    <label id="current-password-err" class="error" for="current-password">{{ $message }}</label>
    @enderror
    <input id="password" type="password" name="password" required="true" />
    @error('password')
    <label id="password-err" class="error" for="password">{{ $message }}</label>
    @enderror
    <input id="password-confirmation" type="password" name="password_confirmation" required="true" />
    @error('password_confirmation')
    <label id="password-confirmation-err" class="error" for="password-confirmation">{{ $message }}</label>
    @enderror
    <button type="submit">Change Password</button>
</form>
于 2021-08-13T18:50:04.957 に答える