Laravelでパスワードリマインダーが作成出来ない

Question

【環境】
vue2.5.17
vue-router3.1.3
vue-template-compiler2.6.10
Laravel5.8.35

【やりたいこと】
パスワードリセット機能を作りたい

【出ているエラーの内容】
■ブラウザのコンソール
app.js:291 POST http://localhost:3000/api/passReset 422 (Unprocessable Entity)

■ブラウザのネットワーク
{message: "The given data was invalid.", errors: {email: ["The email field is required."]}}
message: "The given data was invalid."
errors: {email: ["The email field is required."]}
email: ["The email field is required."]
0: "The email field is required."

【ソースコード】
■passResset.vue

<template>
    <div class="p-reset">

      <form @submit.prevent="passReset">

          <div class="p-reset__email">
              <h2 class="p-reset__title"><i class="fas fa-lock"></i> ログインできない場合</h2>
              <p class="p-reset__text">パスワード再設定用のログインリンクをお送りしますので、メールアドレスを入力してください。
              </p>
              <input class="c-input__menu" type="email" placeholder="メールアドレス">
          </div>

          <div class="p-reset__button">
              <button class="c-button__menu">リンクを送信する</button>
          </div>
      </form>

      <RouterLink to="/register"><div class="p-reset__register"><p>新規登録する</p></div></RouterLink>
      <RouterLink to="/login"><div class="p-reset__login"><p>ログインに戻る</p></div></RouterLink>

    </div>
</template>

<script>


  export default {
    data() {
      return {
        passResetFrom: {
          email: ''
        }
      }
    },
    methods: {
      async passReset () {
        // await axios.post('/api/passReset', { email: this.email })
        await axios.post('/api/passReset', this.passResetFrom)
        }
      }
  }
</script>

■api.php (ルーティング)

Route::post('/passReset', 'Auth\PassResetController@sendResetLinkEmail')->name('passReset');

■PassResetController.php

<?php

namespace App\Http\Controllers;
namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
use Illuminate\Support\Facades\Password;

class PassResetController extends Controller
{
  use SendsPasswordResetEmails;


  public function __construct()
  {
    $this->middleware('guest');
  }

  public function sendResetLinkEmail(Request $request)
  {
    $this->validateEmail($request);

    $response = $this->broker()->sendResetLink(
      $request->only('email')
    );

    return $response == Password::RESET_LINK_SENT
      ? response()->json(['message' => 'Reset link sent to your email.', 'status' => true], 201)
      : response()->json(['message' => 'Unable to send reset link', 'status' => false], 401);
  }
}

ご教授お願い致します。

Answer 1

The email field is required.とのエラーどおりにメールアドレスをPOSTするようにしてください

メールアドレス欄にv-modelを追加

<input class="c-input__menu" v-model="passResetFrom.email" type="email" placeholder="メールアドレス">

  export default {
    data() {
      return {
        passResetFrom: {
          email: ''
        }
      }
    },
    methods: {
      async passReset () {
        // await axios.post('/api/passReset', { email: this.email })
        await axios.post('/api/passReset', this.passResetFrom)
        }
      }
  }

Comments

[rei0]

教えていただいてありがとうございます。
422エラーが解消致しました。

しかし今度は401エラーが出てしまっています。
{message: "Unable to send reset link", status: false}
message: "Unable to send reset link"
status: false

もしご存知でしたら教えて頂きたいです。

[sola-msr]

認証状態でないのかなと

[rei0]

ログインしていない状況でメールを忘れた人向けにパスワードリマインダーを設けているのですが、認証状態でないとエラーになるのでしょうか。

[sola-msr]

これに関して言えばログイン状態が必要とかいうんではなく単純に対象のユーザーがいないからエラー帰ってきてるのでは

https://qiita.com/t-kuni/items/aa906cd07e54037a5eaf
https://qiita.com/zaburo/items/95a62985933c3aef735f

この辺が参考になるんかもしれません

[rei0]

ご丁寧にありがとうございます。
401エラーが解消しました！