📖

【新規ユーザー登録機能】nuxtからlaravel api（laraevl auth）にリクエストしてユーザー登録する

2021/07/05に公開

Laravel

Nuxt

API

tech

この後結局laraevl authはapiとして使わずユーザー登録のapi自作した

流れ

404エラー
該当アドレスのページがない、またはそのサーバーが落ちている状態

laravel側に問題ありか
nuxtのエンドポイント（nuxt.config.js）設定？

505エラー
RegisterController.php

    // 新規ユーザー登録機能apiとして使用
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

nuxtからユーザー情報を入力して登録ボタンを押下し、laravelのapiにリクエストしたところ500エラーで、以下レスポンスが返ってきてきいました。

Too few arguments to function App\\Http\\Controllers\\Auth\\RegisterController::create(), 0 passed in /var/www/html/src/vendor/laravel/framework/src/Illuminate/Routing/Controller.php on line 54 and exactly 1

postmanでapi側の問題か否かを判断

成功

laravel-authのユーザー登録をapi化する

laravelのauthをapiとして使用する

RegisterController.php

    // 新規ユーザー登録機能apiとして使用
    protected function create(Request $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

api.php

// createメソッドを実行
Route::group(["middleware" => "api"], function () {
    Route::post('/register', 'Auth\RegisterController@create'); // 追加
    Route::group(['middleware' => ['jwt.auth']], function () {
    });
});

nuxtからユーザー登録のリクエストを送ってDBに保存されるようにする

auth-nextのヘルパーにはないため、axiosモジュールで登録する関数を自作する

https://ma-vericks.com/nuxt-axios/

<template>
<div class="wrapper">
    <Header />
    <div class="aaa">
      <div class="guide-sentence">
        <h1>SoundMatchingにようこそ！</h1>
      </div>
      <form class="form" @submit.prevent="registerUser">
      <!-- <div class="form"> -->
          <h2 class="title">新規登録</h2>
          <table>
          <tr>
              <td><input type="text" placeholder="ユーザ名" v-model="user.name" class="text-box"></td>
          </tr>
          <tr>
              <td><input type="text" placeholder="メールアドレス" v-model="user.email" class="text-box"></td>
          </tr>
          <tr>
              <td><input type="password" placeholder="パスワード" v-model="user.password" class="text-box"></td>
          </tr>
          <tr>
              <td><input type="password" placeholder="確認用パスワード" v-model="user.passwordToConfirm" class="text-box"></td>
          </tr>
          </table>
          <button class="btn" type="submit">新規登録</button>
          <NuxtLink to="/signin">ログインはこちらから</NuxtLink>
      </form>
      <!-- </div> -->
    </div>
</div>
</template>

<script>
/* eslint-disable */

export default {
  name: 'Signup',
  data(){
    return {
      user:{
        name:'Steve Harry',
        email:'steve@test.com',
        password:'password',
        passwordToConfirm:'password'
      }
    }
  },
  methods: {
    async registerUser(){
      try{ 
        await this.$axios.post('http://localhost:8000/api/register',this.user)
        this.$router.push('/TopAfterLogin')
      } catch(error){
        console.log(error)
        this.$router.push('/signup')
      }
    },
  }
}
</script>

流れ

成功

laravel-authのユーザー登録をapi化する

nuxtからユーザー登録のリクエストを送ってDBに保存されるようにする

Discussion