Laravel Sanctum,FortifyでSPAのログイン機能を実装する(ログイン機能)

はじめに

前回で初期設定が終わったので、ログイン機能を実装していきます。

目次

1.ユーザー返却API実装
2.ログインページ実装
3.テストログイン
　　3-1.テストユーザー作成
　　3-2.テストログイン試行
4.参考記事

1. ユーザー返却api実装

ユーザー情報取得用のルートを下記のように設定します。　

このルートはsanctumガードにより保護しているため、認証されていないとアクセスできません。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

2. ログインページ実装

下記のようなログインページを実装します。

doLoginを実行すると、 前回nuxt.config.jsで設定したapi/loginとapi/userがたたかれ、user情報がstoreに格納されます。

pages/login.vue

<template>
  <v-card max-width="500" class="mx-auto mt-5 full-width" flat outlined>
    <v-card-title class="text-center pa-8">
      <h1 class="text-h5 font-weight-bold full-width">ログイン情報入力</h1>
    </v-card-title>
    <v-divider> </v-divider>
    <div class="px-6 py-8">
      <div style="max-width: 336px" class="mx-auto">
        <v-card-text>
          <v-form @submit.prevent="doLogin">
            <email-input :email.sync="form.email" />
            <password-input :password.sync="form.password" />
            <v-card-actions>
              <v-row justify="end" class="pb-8 pt-4">
                <base-button :color="btnColor">ログイン</base-button>
              </v-row>
            </v-card-actions>
          </v-form>
        </v-card-text>
      </div>
    </div>
  </v-card>
</template>
<script>
import BaseButton from '../../atoms/buttons/BaseButton.vue'
import EmailInput from '../../atoms/inputs/EmailInput.vue'
import PasswordInput from '../../atoms/inputs/PasswordInput.vue'
export default {
  components: { EmailInput, PasswordInput, BaseButton },
  data() {
    return {
      btnColor: 'indigo accent-2',
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async doLogin() {
      try {
        await this.$auth.loginWith("laravelSanctum", {
          data: this.form,
        })
		this.$router.push('/')
      } catch (e) {}
    },
  },
}
</script>
<style scoped>
.full-width {
  width: 100%;
}
</style>

BaseButton.vue

BaseButton.vue

<template>
  <v-btn
    :class="className"
    :type="type"
    :color="color"
    width="100%"
    height="42px"
    rounded
  >
    <slot></slot>
  </v-btn>
</template>
<script>
export default {
  props: {
    className: {
      type: String,
      default: 'info'
    },
    color: {
      type: String,
      default: 'primary'
    },
    type: {
      type: String,
      default: 'submit'
    }
  }
}
</script>

EmailInput.vue

EmailInput.vue

<template>
  <v-text-field
    v-model="setEmail"
    label="メールアドレスを入力"
    placeholder="[e-mail]"
    type="email"
    outlined
    dense
    rounded
  />
</template>
<script>
export default {
  props: {
    email: {
      type: String,
      default: ''
    }
  },
  computed: {
    setEmail: {
      get() {
        return this.email
      },
      set(newVal) {
        return this.$emit('update:email', newVal)
      }
    }
  }
}
</script>

PasswordInput.vue

PasswordInput.vue

<template>
  <v-text-field
    v-model="setPassword"
    type="password"
    label="パスワードを入力"
    placeholder="8文字以上"
    outlined
    rounded
    dense
  />
</template>
<script>
export default {
  props: {
    password: {
      type: String,
      default: ''
    }
  },
  computed: {
    setPassword: {
      get() {
        return this.password
      },
      set(newVal) {
        return this.$emit('update:password', newVal)
      }
    }
  }
}
</script>

3. テストログイン

3-1. テストユーザー作成

tinkerでテスト用のユーザーを作成します。

php artisan tinker
App\Models\User::factory()->create(['name' => 'ゲストユーザー', 'email' => '[e-mail]']);

3-2. テストログイン試行

作成したユーザー情報でログインするとHTTPステータスは200が返って、また、userの情報も取得できました。

4. 参考記事