質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

523閲覧

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

rei0

総合スコア14

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2020/01/19 06:43

【環境】
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

vue

1<template> 2 <div class="p-reset"> 3 4 <form @submit.prevent="passReset"> 5 6 <div class="p-reset__email"> 7 <h2 class="p-reset__title"><i class="fas fa-lock"></i> ログインできない場合</h2> 8 <p class="p-reset__text">パスワード再設定用のログインリンクをお送りしますので、メールアドレスを入力してください。 9 </p> 10 <input class="c-input__menu" type="email" placeholder="メールアドレス"> 11 </div> 12 13 <div class="p-reset__button"> 14 <button class="c-button__menu">リンクを送信する</button> 15 </div> 16 </form> 17 18 <RouterLink to="/register"><div class="p-reset__register"><p>新規登録する</p></div></RouterLink> 19 <RouterLink to="/login"><div class="p-reset__login"><p>ログインに戻る</p></div></RouterLink> 20 21 </div> 22</template> 23 24<script> 25 26 27 export default { 28 data() { 29 return { 30 passResetFrom: { 31 email: '' 32 } 33 } 34 }, 35 methods: { 36 async passReset () { 37 // await axios.post('/api/passReset', { email: this.email }) 38 await axios.post('/api/passReset', this.passResetFrom) 39 } 40 } 41 } 42</script> 43

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

php

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

■PassResetController.php

php

1<?php 2 3namespace App\Http\Controllers; 4namespace App\Http\Controllers\Auth; 5 6use App\Http\Controllers\Controller; 7use Illuminate\Http\Request; 8use Illuminate\Foundation\Auth\SendsPasswordResetEmails; 9use Illuminate\Support\Facades\Password; 10 11class PassResetController extends Controller 12{ 13 use SendsPasswordResetEmails; 14 15 16 public function __construct() 17 { 18 $this->middleware('guest'); 19 } 20 21 public function sendResetLinkEmail(Request $request) 22 { 23 $this->validateEmail($request); 24 25 $response = $this->broker()->sendResetLink( 26 $request->only('email') 27 ); 28 29 return $response == Password::RESET_LINK_SENT 30 ? response()->json(['message' => 'Reset link sent to your email.', 'status' => true], 201) 31 : response()->json(['message' => 'Unable to send reset link', 'status' => false], 401); 32 } 33} 34

ご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

html

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

js

1 export default { 2 data() { 3 return { 4 passResetFrom: { 5 email: '' 6 } 7 } 8 }, 9 methods: { 10 async passReset () { 11 // await axios.post('/api/passReset', { email: this.email }) 12 await axios.post('/api/passReset', this.passResetFrom) 13 } 14 } 15 }

投稿2020/01/19 06:59

sola-msr

総合スコア876

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rei0

2020/01/19 07:27

教えていただいてありがとうございます。 422エラーが解消致しました。 しかし今度は401エラーが出てしまっています。 {message: "Unable to send reset link", status: false} message: "Unable to send reset link" status: false もしご存知でしたら教えて頂きたいです。
sola-msr

2020/01/19 07:37

認証状態でないのかなと
rei0

2020/01/19 07:53

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

2020/01/19 10:02

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問