🌽 docs: add nuxt/about-the-login-system

Author: hisasann

docs/_sidebar.md

@@ -60,6 +60,6 @@
 - その他
 
   - [開発で気をつけるポイント](other/development-tips.md)
-  - [Nuxt.jsを使ったログイン周りの仕組みについて]()
+  - [Nuxt.jsを使ったログイン周りの仕組みについて](nuxt/about-the-login-system.md)
   - [サーバーサイドのログ処理](nuxt/server-side-logging.md)
   - [Google Tag Manager]()

docs/nuxt/about-the-login-system.md

@@ -0,0 +1,79 @@
+# 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` を削除します