Nuxt.jsを使ったログイン周りの仕組みについて

ログイン状態でブラウザでリロードした場合（SSR）

リクエスト時 ブラウザ → SSR サーバ → API サーバ と経由する

ブラウザ → SSR サーバ 間 は、 cookie で token を渡します

SSR サーバ → API サーバ 間 は、 リクエストヘッダ に token を付与して渡します

レスポンス時 ブラウザ ← SSR サーバ ← API サーバ と経由する

SSR サーバ ← API サーバ 間 は、 レスポンスヘッダ に token を付与して返します

ブラウザ ← SSR サーバ 間 は、 vuex の state 経由で token を返します

具体的には SSR サーバーサイドの nuxtServerInit イベントでログインチェック処理を dispatch し、 state に保存します

次にフロント側の nuxtClientInit イベントで、 state の値を元に cookie に token を設定します

未ログイン状態でブラウザでリロードした場合（SSR）

リクエスト時 ブラウザ → SSR サーバ → API サーバ と経由する

ブラウザ → SSR サーバ 間 は、 cookie に token がないので渡せません

SSR サーバ → API サーバ 間 は、 リクエストヘッダ に token がない状態で渡します

レスポンス時 ブラウザ ← SSR サーバ ← API サーバ と経由する

SSR サーバ ← API サーバ 間 は、 レスポンスヘッダ に token を付与しません

ブラウザ ← SSR サーバ 間 は、 vuex の state に token がないので、 cookie から token を削除します

未ログイン状態でブラウザでログイン必須画面を開いた場合（SSR）

ベースの挙動は 未ログイン状態でブラウザでリロードした場合（SSR） と同じですが、その後、authenticated ミドルウェアによりログイン必須画面に未ログイン状態で遷移したので、サインイン画面にリダイレクトします

ログイン状態でブラウザで SPA した場合（CSR）

リクエスト時 ブラウザ → API サーバ と経由する

ブラウザ → API サーバ 間 は、 リクエストヘッダ に cookie から取得した token を付与して渡します

レスポンス時 ブラウザ ← API サーバ と経由する

ブラウザ ← API サーバ 間 は、 レスポンスヘッダ に token を付与して返します

そのまま token を cookie に保存します

未ログイン状態でブラウザで SPA した場合（CSR）

リクエスト時 ブラウザ → API サーバ と経由する

ブラウザ → API サーバ 間 は、 cookie に token がないので リクエストヘッダ に token がない状態で渡します

レスポンス時 ブラウザ ← API サーバ と経由する

SSR サーバ ← API サーバ 間 は、 レスポンスヘッダ に token を付与せず、 vuex の state に token がないので、 cookie から token を削除します

未ログイン状態でブラウザでログイン必須画面を SPA で開いた場合（ログアウト画面）

ベースの挙動は 未ログイン状態でブラウザで SPA した場合（CSR） と同じですが、その後、authenticated ミドルウェアによりログイン必須画面に未ログイン状態で遷移したので、サインイン画面にリダイレクトします

すでにログインしていたら別の画面にリダイレクトしたい場合（ログイン画面）

anonymous ミドルウェアが「すでにログインしていたらトップにリダイレクトする」を担う

ログイン状態からログアウトするときの挙動

リクエストヘッダ に token がない状態でリクエストします

cookie から token を削除します