はじめに
前回Nuxt3の@sidebase/nuxt-authで認証処理を作成しました。
Nuxt3でNuxt-Authモジュールを使って認証処理をつくる
以前、以下の投稿で簡易な認証機能を試してみました。しかし、以下は認証フローのイメージを掴むための簡易なサンプルでしたので機能は不十分でした。 今回は、Nuxt-Authというモジュールを使って認証機能を組み込むための方法について見ていきたい...
debug-life.net
2023.04.17
今回はserver/apiやmiddlewareで認証済みかチェックする処理を作ります。
パターン
以下３つのパターンで書いてみます。
server/apiでチェック
eventHandlerの中で都度セッションの有無をチェックします。以下のページのようなイメージです。
sidebase - by SIDESTREAM
The web app development kit to build production fullstack Nuxt 3 apps quickly.
sidebase.io
|
1 2 3 4 5 6 7 |
export default defineEventHandler(async (event) => { const session = await getServerSession(event) if (!session) { return { status: 'unauthenticated!' } } return { status: 'authenticated!' } }) |
apiごとにセッション有無をチェックする処理を記述する必要があります。そのため一括でチェックしたい場合は次のmiddlewareで処理するという方法があります。
server/middlewareでチェック
middlewareに書くと全てのリクエストで以下の認証チェックが効きます。リクエストパスで認証有無を切り分けたい場合はpathをチェックする形になるでしょうか。
|
1 2 3 4 5 6 |
export default defineEventHandler(async (event) => { const session = await getServerSession(event) if (!session) { throw createError({ statusMessage: 'Unauthenticated', statusCode: 403 }) } }) |
独自のeventHandlerでチェック
eventHandlerが呼ばれる前にセッションをチェックします。defineEventHandlerの代わりにdefineAuthEventHandlerを使います。apiごとに使い分けられAPIパスも意識しなくて良いのでよさげな気がします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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) } |
最終的に３番目の形に落ち着きました。
コメント