Nuxt3でいい感じにセッションを管理したい
はじめに
Nuxt2のサーバーサイドにはexpressが採用されていたので、express-sessionを使ってセッションの管理を行なっていましたが、Nuxt3ではサーバーサイドにh3が採用され、従来の方法が使えなくなりました。
執筆時点でNuxt3のセッション管理として有力なのは@sidebase/nuxt-authみたいですが、どうにもうまく扱えませんでした。express-sessionぐらいシンプルにコードを書けないかと思い、Nuxt3の標準機能であるuseSessionを使った方法を考えてみました。
考えてみましたが、正直これでいいのか全然わかりません。有識者の方に意見を伺いたい気持ちでこの記事を書きました。誰か助けてください。
ソースコード
GitHubにサンプルを置きました。動かし方はREADME.mdに記載しています。あと、データベースはMongoDBを使ってます。
一応、各ファイルの役割については以下に解説を掲載します。
composables
useAuth.ts
セッションの状態を保持したり、サーバーへのリクエストの実装を担うuseAuthを定義しています。
getSession関数だけuseFetchを使っているのは、後述するplugins/init.server.tsで、ページの初回表示の際もセッション取得のリクエストを送れるようにするためです。
pages
index.vue
ログイン後に表示されるページです。definePageMetaに定義したmiddlewareによって、セッションが有効でない場合はログインページに強制的に遷移されるようになっています。
login.vue
ログインページです。
register.vue
登録ページです。
plugins
init.server.ts
ページの初回表示時や、遷移時にセッションの状態を取得します。
server
api/auth/**.ts
ログイン、ログアウト、登録、セッション取得のAPIです。
特に、session.get.tsではevent.context.sessionオブジェクトを使ってセッションが有効であるかを判定しています。
api/user/me.get.ts
ログイン中のユーザーの情報を返すAPIです。
session.get.tsと同様に、event.context.sessionオブジェクトを使ってセッションが有効であるかの判定、ログイン中のユーザーIDの取得を行っています。
middleware/session.ts
useSessionによってセッション管理を開始し、そのオブジェクトをevent.context.sessionに定義するミドルウェアです。
先述したAPIに、ここで定義したオブジェクトを渡すことができます。これによって、express-sessionにおけるreq.sessionに近い扱いが可能になります。
models/user.ts
MongoDB用にユーザーのモデルを定義しています。
plugins/mongoose.ts
サーバー起動時にMongoDBに接続します。
app.vue
ページ全体のナビゲーションと、認証済みかどうかの表示を行います。
Nuxt2までのlayouts/default.vueと同等です。
Discussion