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

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

https://qiita.com/HuntingRathalos/items/856a0f9c673d3a983d9b
# 目次
[1.ユーザー返却API実装](#1-ユーザー返却api実装)
[2.ログインページ実装](#2-ログインページ実装)
[3.テストログイン](#3-テストログイン)
　　[3-1.テストユーザー作成](#3-1-テストユーザー作成)
　　[3-2.テストログイン試行](#3-2-テストログイン試行)
[4.参考記事](#4-参考記事)

# 1. ユーザー返却api実装
ユーザー情報取得用のルートを下記のように設定します。　

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

```php: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に格納されます。
```vue: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>
```

<details><summary><b>BaseButton.vue</b></summary><div>

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

</div></details>

<details><summary><b>EmailInput.vue</b></summary><div>

```vue:EmailInput.vue
<template>
  <v-text-field
    v-model="setEmail"
    label="メールアドレスを入力"
    placeholder="your@email.com"
    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>
```

</div></details>

<details><summary><b>PasswordInput.vue</b></summary><div>

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

</div></details>

# 3. テストログイン

### 3-1. テストユーザー作成
tinkerでテスト用のユーザーを作成します。
```php
php artisan tinker
App\Models\User::factory()->create(['name' => 'ゲストユーザー', 'email' => 'guest@example.com']);
```

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

# 4. 参考記事

https://qiita.com/itouuuuuuuuu/items/1dc6401022e0d771c757

https://zenn.dev/nagi125/articles/78d931f9b72fff1f1a7d