nuxt3のserver/apiで認証済みか否かをチェックする

はじめに
パターン
参考リンク

はじめに

前回Nuxt3の@sidebase/nuxt-authで認証処理を作成しました。

以前、以下の投稿で簡易な認証機能を試してみました。しかし、以下は認証フローのイメージを掴むための簡易なサンプルでしたので機能は不十分でした。今回は、Nuxt-Authというモジュールを使って認証機能を組み込むための方法について見ていきたいと...

今回はserver/apiやmiddlewareで認証済みかチェックする処理を作ります。

パターン

以下３つのパターンで書いてみます。

server/apiでチェック

eventHandlerの中で都度セッションの有無をチェックします。以下のページのようなイメージです。

sidebase - by SIDESTREAM

The web app development kit to build production fullstack Nuxt 3+ apps quickly.

export default defineEventHandler(async (event) => {
  const session = await getServerSession(event)
  if (!session) {
    return { status: 'unauthenticated!' }
  }
  return { status: 'authenticated!' }
})

apiごとにセッション有無をチェックする処理を記述する必要があります。そのため一括でチェックしたい場合は次のmiddlewareで処理するという方法があります。

server/middlewareでチェック

middlewareに書くと全てのリクエストで以下の認証チェックが効きます。リクエストパスで認証有無を切り分けたい場合はpathをチェックする形になるでしょうか。

export default defineEventHandler(async (event) => {
  const session = await getServerSession(event)
  if (!session) {
    throw createError({ statusMessage: 'Unauthenticated', statusCode: 403 })
  }
})

独自のeventHandlerでチェック

eventHandlerが呼ばれる前にセッションをチェックします。defineEventHandlerの代わりにdefineAuthEventHandlerを使います。apiごとに使い分けられAPIパスも意識しなくて良いのでよさげな気がします。

export function defineAuthEventHandler<T = any>(handler: EventHandler<T>): EventHandler<T> {
  const authenticated = async (event: H3Event) => {
    const session = await getServerSession(event)
    if (!session || !session?.user) {
      throw createError({
        statusCode: 403,
        statusMessage: 'Unauthenticated',
      })
    }
    return handler(event)
  }
  return defineEventHandler(authenticated)
}

最終的に３番目の形に落ち着きました。

参考リンク

https://sidebase.io/nuxt-auth/getting-started