パスワードリマインダー

Laravelでパスワードリマインダーの辺りを作っていました。
パスワードを忘れてログイン出来ないときにemailに再設定のメールを送るアレです。

そもそもLaravel5.xの場合、
php artisan make:auth
のコマンドを打つだけで認証周りは一瞬で出来ます。
とはいえLaravelはまだまだ苦手。
こんな感じで作ってますよというのを書いていこうと思います。

まずはコントローラー
この記事をもろパクリして作ってます。

Laravel(5.7)のパスワードリセット機能をAPIからキックする。 - Qiita

Laravelではmake authすれば登録やらパスワードリセットやら設定してくれますが、標準のルートではCSRFのtokenを要求されるため別途API用に専用のルートを作成して対応します。　追記 Email Verifyと...

 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);
  }
}

次にルーティング。
web.phpではなくapi.phpに書いてます。

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

最後にPassReset.vueです。
v-modelを書き忘れていて大分時間が掛かりました。

<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="メールアドレス">-->
            <input class="c-input__menu" v-model="passResetFrom.email" 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>

あと今回はmailtrapを使用して動作確認をしています。