Zenn
🐈

nuxt-sanctum-authを使ってLaravel Sanctumを使用したAPIをNuxt3で呼び出す

2024/05/20に公開
Laravel
Nuxt 3
tech

Nuxt3ではaxiosをサポートしていないとのことなので、Nuxt3でAPIの呼び出しを行いやすいパッケージはないか探してみました。
参考：https://axios.nuxtjs.org/

nuxt-sanctum-authとは

https://github.com/dystcz/nuxt-sanctum-auth

  • Laravel SanctumとNuxt3を統合するためのパッケージ。
  • Laravel Sanctumを使って作成したAPIを呼ぶ際の認証部分の設定を行ってくれる。
  • 認証済みかどうか判断し、リダイレクトも行ってくれる。
  • ただしまだ開発中のようで、SSRはサポートされていない。

導入方法

  1. インストールを行う
    ※下記はnpmの場合
npm i nuxt-sanctum-auth
  1. nuxt.config.tsファイルに各種設定を記載する
nuxt.config.ts
  // falseに変更
  ssr: false,
  css: ['~/assets/css/tailwind.css'],
  modules: ['@nuxtjs/tailwindcss'],
  modules: [
    '@nuxtjs/tailwindcss',
    // 追加
    'nuxt-sanctum-auth',
  ],

nuxt-sanctum-authの設定について

nuxt.config.tsでnuxt-sanctum-authの設定を行うことができる。
この設定はデフォルト設定から変更しない場合は行う必要はないが、必要に応じてログインAPIやユーザー情報取得APIのエンドポイントやリダイレクト先などを変更することができる。

今回はLaravel Sanctumのcsrf-cookieのエンドポイントを下記のように変更してプレフィックスがapiになるよう統一しているため、baseUrlやendpointsを変更した。

変更前：/sanctum/csrf-cookie
↓
変更後：/api/csrf-cookie

またリダイレクト先の設定もこちらで行える。

nuxt.config.ts
  nuxtSanctumAuth: {
    baseUrl: 'http://localhost:8080/api',
    endpoints: {
      csrf: '/csrf-cookie',
    },
    redirects: {
      home: '/',
      login: '/login',
      logout: '/',
    },
  },

ログインを行う

ログイン、ログアウトは予めメソッドが用意されており、nuxt.config.tsでendpointsに設定したAPIが呼ばれる。
$sanctumAuthにそのメソッドが用意されているため、ログインAPIを呼ぶ場合は下記のように記述する。

login.vue
<script setup lang="ts">
import { reactive } from 'vue'

const { $sanctumAuth } = useNuxtApp()
// フォームで入力された内容
const form = reactive({
  email: '',
  password: '',
})

async function login() {
  try {
    // ログインAPIを呼ぶ
    await $sanctumAuth.login(
      {
        email: form.email,
        password: form.password,
      },
      (data) => {
        if (data.result) {
          navigateTo('/')
        }
      }
    )
  } catch (e) {
    // エラー処理
  }
}
</script>

各ページの認証処理について

ページごとにログイン中の場合のみ閲覧できるページか・未ログインの場合のみ閲覧できるかを設定することができる。
middlewareとしてguest、authが提供されており、各ページの.vueファイルで設定する。

ログイン中のみ表示できるページにする場合

index.vue
<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})
</script>

未ログイン時のみ表示できるページにする場合

login.vue
<script setup lang="ts">
definePageMeta({
  middleware: 'guest',
})
</script>

ログインしたユーザーの情報を取得する

nuxt.config.tsのendpoints内にあるuserでユーザー情報を取得するAPIのエンドポイントを設定でき、自動で呼ばれる。
取得したユーザー情報はuseAuth()を使って取得することができる。

index.vue
<script setup lang="ts">
const { user } = useAuth()
</script>

その他のAPIを呼ぶ方法

ログインやログアウト以外のAPIを呼びたい時は$apiFetchを使って呼ぶことができる。

signup.vue
<script setup lang="ts">
import { reactive } from 'vue'

const { $apiFetch } = useNuxtApp()

const form = reactive({
  name: '',
  email: '',
  password: '',
})

async function register() {
  const res = await useAsyncData('register',
    () => $apiFetch('signup/register', {
      method: 'POST',
      body: JSON.stringify(form),
    })
  )
  const resData = res.data.value
}
</script>

Discussion