NuxtとJWTとAPIと

Nuxt+APIアプリでJWT認証を選択したときの実装

まず、Nuxt側にユーザーがアクセスした時の流れを確認します。
注意したいのが、サーバーへの最初のリクエスト時だけstorenuxtServerInitmiddlewareasyncDatafetchがサーバー側で実行されます。それ以降は、リダイレクトしない限りクライアントサイドで実行されます。

Async Data Options in Vue's Nuxt.js

ログイン周りについて

前提として、ユーザーがログインするとログアウトするまでcookieにAPIサーバから発行されたJWTトークンを期限なしで保存することにします。

では、ユーザーがNuxtサーバーへ最初のリクエストを要求した時の流れを見てみましょう。

  1. storeのnuxtServerInitが呼ばれ、JWTトークンが含まれていた場合APIサーバへトークンを使用してユーザー情報を要求し、それをvuexのstoreへ保存します。

  2. middlewareは認証要求ページ(authenticated)・非認証要求ページ(noauthenticated)の2つを作ります。
    認証要求ページでは、cookie内部のJWTトークンの有無を確認します。
    非認証要求ページでは、JWTトークンがあった場合にユーザー情報を返す処理を書きます。

  3. あとは各ページ、各コンポーネントからvuexのユーザデータに対してアクセスするだけです。