Vue.js + laravel ユーザ認証 登録ができず困っています

Question

Vue.js + laravel ユーザ認証 登録ができず困っています

ユーザ認証を成功させる方法に関して下記を伺いたいです。

1. RegistersUsersファイルがないのはLaravelのバージョンによる仕様なのでしょうか。
2. RegistersUsersファイルの導入方法に関しまして。
3. 現在考えている解決策は見当違いでしょうか。

HypertextCandyの写真共有アプリを作ろう (6) 認証機能とVuexでaxiosでlaravelと通信を行いユーザ登録を行おうとしております。
『コンポーネントの実装』の次の項目の『動作確認』にてユーザ情報を入力後ユーザ登録ボタンを押した際にエラーが発生し
ユーザ登録ができず困っております。

発生している問題・エラーメッセージ

//ユーザ登録ボタンを押した際に下記のエラーが起きます
POST http://localhost:3000/api/register 500 (Internal Server Error)

[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 500"

found in

---> <Login> at resources/js/pages/Login.vue
       <App> at resources/js/App.vue
         <Root>
Error: Request failed with status code 500
    at createError (app.js?id=c15cd054408653e22804:711)
    at settle (app.js?id=c15cd054408653e22804:972)
    at XMLHttpRequest.handleLoad (app.js?id=c15cd054408653e22804:180)

該当のソースコード

//resources\js\auth.js
import Axios from "axios"

const state = {
  user: null
}

const getters = {}

const mutations = {
  setUser(state, user) {
    state.user = user
  }
}

const actions = {
  async register(context, data) {
    const response = await axios.post('/api/register', data)
    context.commit('setUser', response.data)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

//resources\js\pages\Login.vue
<template>
  <div class="container--small">
    <ul class="tab">
      <li
        class="tab__item"
        :class="{'tab__item--active': tab === 1 }"
        @click="tab = 1"
      >Login</li>
      <li
        class="tab__item"
        :class="{'tab__item--active': tab === 2 }"
        @click="tab = 2"
      >Register</li>
    </ul>
    <div class="panel" v-show="tab === 1">
      <form class="form" @submit.prevent="login">
        <label for="login-email">Email</label>
        <input type="text" class="form__item" id="login-email" v-model="loginForm.email">
        <label for="login-password">Password</label>
        <input type="password" class="form__item" id="login-password" v-model="loginForm.password">
        <div class="form__button">
          <button type="submit" class="button button--inverse">login</button>
        </div>
      </form>
    </div>
    <div class="panel" v-show="tab === 2">
      <form class="form" @submit.prevent="register">
        <label for="username">Name</label>
        <input type="text" class="form__item" id="username" v-model="registerForm.name">
        <label for="email">Email</label>
        <input type="text" class="form__item" id="email" v-model="registerForm.email">
        <label for="password">Password</label>
        <input type="password" class="form__item" id="password" v-model="registerForm.password">
        <label for="password-confirmation">Password (confirm)</label>
        <input type="password" class="form__item" id="password-confirmation" v-model="registerForm.password_confirmation">
        <div class="form__button">
          <button type="submit" class="button button--inverse">register</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: 1,
      loginForm: {
        email: '',
        password: ''
      },
      registerForm: {
        name: '',
        email: '',
        password: '',
        password_confirmation: ''
      }
    }
  },
  methods: {
    login () {
      console.log(this.loginForm)
    },
    async register () {
      await this.$store.dispatch('auth/register', this.registerForm)

      this.$router.push('/')
    }
  }
}
</script>

//resouces\js\index.js
import Vue from 'vue'
import Vuex from 'vuex'

import auth from './auth'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    auth
  }
})

export default store

//routes\api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

// 会員登録
Route::post('/register', 'Auth\RegisterController@register')->name('register');

// ログイン
Route::post('/login', 'Auth\LoginController@login')->name('login');

// ログアウト
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');

//app\Http\Controllers\Auth\RegisterController.php
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Http\Request;

class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

    protected function registered(Request $request, $user)
    {
        return $user;
    }
}

試したこと

登録の認証処理に関わる部分(Login.vue, auth.js, api.php)の記述にミスが無いか確認を行いました。
その際にRegisterController.phpの継承しているIlluminate\Foundation\Auth\RegistersUsersに
登録処理が書かれている事が分かりました。

しかし、vendor\laravel\framwork\src\Illuminate\Foundation\Authを確認したのですが、
RegistersUsersはありませんでした。
（AuthディレクトリにあったのはAccessディレクトリ(Authorizable.php,AuthorizesRequest.php)
とUsers.phpでした)

現在考えている解決先として、RegistersUsersをインストールする事で、Auth\RegisterControllerのregisterアクションの実行が
成功するのではと考えております。
composer updateを行ってもRegistersUsersファイルは入手できておりません。

下記に関して伺いたいです。

1. RegistersUsersファイルがないのはLaravelのバージョンによる仕様なのでしょうか。
2. RegistersUsersファイルの導入方法に関しまして。
3. 現在考えている解決策は見当違いでしょうか。

分かりづらい説明でしたら申し訳ありません。大変恐れ入りますがご回答頂けましたら幸いです。

補足情報（FW/ツールのバージョンなど）

Laravel ver7
Vue.js ver2.5.17
Vuex ver3.5.1
composer 1.10.9
php 7.4.1-fpm

Answer 1

チュートリアルを初めからやり直してみて、
正常な動作を確認できました。

ユーザ認証の登録ができなかった理由は
正しく登録できていたようで、ログイン状態でのユーザ登録を行っている
状態となっていたことがエラーの原因だと判明しました。
お騒がせ致しました。回答頂きましたyuki84webさん、m1102さんどうもありがとうございました。

Answer 2

Laravel標準の認証の導入について、v7なら

composer require laravel/ui

を実行するそうですが、済んでますか？

https://laravel.com/docs/7.x/frontend#introduction

Comments

[nao328]

ご回答いただきましてありがとうございます。
composer require laravel/ui　は既に実施済となります

[m0321]

・下記は３つ実行済みでしょうか？
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

実行済みでしたら、申し訳ありません。

[nao328]

ご連絡頂きありがとうございます。
返事が遅くなり申し訳ありません。実施済みでした。