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

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

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

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

Laravel

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

Q&A

解決済

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

nao328
nao328

総合スコア1

Vue.js

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

Laravel

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

2回答

0グッド

1クリップ

2526閲覧

投稿2020/07/30 15:02

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

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

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

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

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

JavaScript

1//ユーザ登録ボタンを押した際に下記のエラーが起きます 2POST http://localhost:3000/api/register 500 (Internal Server Error) 3 4[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 500" 5 6found in 7 8---> <Login> at resources/js/pages/Login.vue 9 <App> at resources/js/App.vue 10 <Root> 11Error: Request failed with status code 500 12 at createError (app.js?id=c15cd054408653e22804:711) 13 at settle (app.js?id=c15cd054408653e22804:972) 14 at XMLHttpRequest.handleLoad (app.js?id=c15cd054408653e22804:180)

該当のソースコード

JavaScript

1//resources\js\auth.js 2import Axios from "axios" 3 4const state = { 5 user: null 6} 7 8const getters = {} 9 10const mutations = { 11 setUser(state, user) { 12 state.user = user 13 } 14} 15 16const actions = { 17 async register(context, data) { 18 const response = await axios.post('/api/register', data) 19 context.commit('setUser', response.data) 20 } 21} 22 23export default { 24 namespaced: true, 25 state, 26 getters, 27 mutations, 28 actions 29}

Vue

1//resources\js\pages\Login.vue 2<template> 3 <div class="container--small"> 4 <ul class="tab"> 5 <li 6 class="tab__item" 7 :class="{'tab__item--active': tab === 1 }" 8 @click="tab = 1" 9 >Login</li> 10 <li 11 class="tab__item" 12 :class="{'tab__item--active': tab === 2 }" 13 @click="tab = 2" 14 >Register</li> 15 </ul> 16 <div class="panel" v-show="tab === 1"> 17 <form class="form" @submit.prevent="login"> 18 <label for="login-email">Email</label> 19 <input type="text" class="form__item" id="login-email" v-model="loginForm.email"> 20 <label for="login-password">Password</label> 21 <input type="password" class="form__item" id="login-password" v-model="loginForm.password"> 22 <div class="form__button"> 23 <button type="submit" class="button button--inverse">login</button> 24 </div> 25 </form> 26 </div> 27 <div class="panel" v-show="tab === 2"> 28 <form class="form" @submit.prevent="register"> 29 <label for="username">Name</label> 30 <input type="text" class="form__item" id="username" v-model="registerForm.name"> 31 <label for="email">Email</label> 32 <input type="text" class="form__item" id="email" v-model="registerForm.email"> 33 <label for="password">Password</label> 34 <input type="password" class="form__item" id="password" v-model="registerForm.password"> 35 <label for="password-confirmation">Password (confirm)</label> 36 <input type="password" class="form__item" id="password-confirmation" v-model="registerForm.password_confirmation"> 37 <div class="form__button"> 38 <button type="submit" class="button button--inverse">register</button> 39 </div> 40 </form> 41 </div> 42 </div> 43</template> 44 45<script> 46export default { 47 data () { 48 return { 49 tab: 1, 50 loginForm: { 51 email: '', 52 password: '' 53 }, 54 registerForm: { 55 name: '', 56 email: '', 57 password: '', 58 password_confirmation: '' 59 } 60 } 61 }, 62 methods: { 63 login () { 64 console.log(this.loginForm) 65 }, 66 async register () { 67 await this.$store.dispatch('auth/register', this.registerForm) 68 69 this.$router.push('/') 70 } 71 } 72} 73</script>

JavaScript

1//resouces\js\index.js 2import Vue from 'vue' 3import Vuex from 'vuex' 4 5import auth from './auth' 6 7Vue.use(Vuex) 8 9const store = new Vuex.Store({ 10 modules: { 11 auth 12 } 13}) 14 15export default store 16

PHP

1//routes\api.php 2<?php 3use Illuminate\Http\Request; 4use Illuminate\Support\Facades\Route; 5 6// 会員登録 7Route::post('/register', 'Auth\RegisterController@register')->name('register'); 8 9// ログイン 10Route::post('/login', 'Auth\LoginController@login')->name('login'); 11 12// ログアウト 13Route::post('/logout', 'Auth\LoginController@logout')->name('logout');

PHP

1//app\Http\Controllers\Auth\RegisterController.php 2<?php 3 4namespace App\Http\Controllers\Auth; 5 6use App\Http\Controllers\Controller; 7use App\Providers\RouteServiceProvider; 8use App\User; 9use Illuminate\Foundation\Auth\RegistersUsers; 10use Illuminate\Support\Facades\Hash; 11use Illuminate\Support\Facades\Validator; 12use Illuminate\Http\Request; 13 14class RegisterController extends Controller 15{ 16 /* 17 |-------------------------------------------------------------------------- 18 | Register Controller 19 |-------------------------------------------------------------------------- 20 | 21 | This controller handles the registration of new users as well as their 22 | validation and creation. By default this controller uses a trait to 23 | provide this functionality without requiring any additional code. 24 | 25 */ 26 27 use RegistersUsers; 28 29 /** 30 * Where to redirect users after registration. 31 * 32 * @var string 33 */ 34 protected $redirectTo = RouteServiceProvider::HOME; 35 36 /** 37 * Create a new controller instance. 38 * 39 * @return void 40 */ 41 public function __construct() 42 { 43 $this->middleware('guest'); 44 } 45 46 /** 47 * Get a validator for an incoming registration request. 48 * 49 * @param array $data 50 * @return \Illuminate\Contracts\Validation\Validator 51 */ 52 protected function validator(array $data) 53 { 54 return Validator::make($data, [ 55 'name' => ['required', 'string', 'max:255'], 56 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 57 'password' => ['required', 'string', 'min:8', 'confirmed'], 58 ]); 59 } 60 61 /** 62 * Create a new user instance after a valid registration. 63 * 64 * @param array $data 65 * @return \App\User 66 */ 67 protected function create(array $data) 68 { 69 return User::create([ 70 'name' => $data['name'], 71 'email' => $data['email'], 72 'password' => Hash::make($data['password']), 73 ]); 74 } 75 76 protected function registered(Request $request, $user) 77 { 78 return $user; 79 } 80} 81

試したこと

登録の認証処理に関わる部分(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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

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

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

投稿2020/09/02 13:25

編集2020/09/02 13:26
nao328

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

ベストアンサー

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

composer require laravel/ui

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

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

投稿2020/07/31 14:46

yuki84web

総合スコア1855

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

nao328

2020/08/01 00:47

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

2020/08/06 03:31

・下記は3つ実行済みでしょうか? php artisan ui bootstrap --auth php artisan ui vue --auth php artisan ui react --auth 実行済みでしたら、申し訳ありません。
nao328

2020/09/02 13:17

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Vue.js

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

Laravel

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