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

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

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

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

解決済

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

nao328
nao328

総合スコア0

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

2回答

0評価

1クリップ

1844閲覧

投稿2020/07/30 15:02

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

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

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

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

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

JavaScript

//ユーザ登録ボタンを押した際に下記のエラーが起きます 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)

該当のソースコード

JavaScript

//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 }

Vue

//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>

JavaScript

//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

PHP

//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');

PHP

//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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。