🍣 docs: add nuxt login markdown

Author: hisasann

docs/nuxt/Nuxt.jsのログイン処理でCookieを使わない場合の考察.md

@@ -0,0 +1,27 @@
+# Nuxt.js のログイン処理で Cookie を使わない場合の考察
+
+## 記事かきましたー！
+
+[Nuxt.jsでログインをどうやるか、そしてCookieからlocalStorageへ - DJ lemon-Sour's diary (prod.hisasann)](https://hisasann.github.io/2019/06/22/how-to-login-with-nuxt-and-cookie-to-localstorage/)
+
+## 現状
+
+* Nuxt の middleware は SSR 時はサーバーサイドで一度実行され、 CSR 時にもそれぞれ実行されるが、 Cookie を使わない場合、 SSR 時にログイン状態か判断つかないので、ログイン画面へのリダイレクトができない、つまり 302 を返せない
+
+* さらに仮にフロントエンド側でログイン状態を確認しつつ、非ログインの場合にログイン必須画面を表示したときにログイン画面に遷移するとしても、一瞬でもログイン必須画面が見えてしまう
+
+* Nuxt の middleware を使わない場合、 Nuxt のアーキテクチャの割とメイン機能が使えないことになってしまう
+
+## ではどうするか
+
+1. Nuxt の middleware をガチで使わない方向でいく（工数と難易度や汎用性含めなかなか厳しい）
+
+1. Cookie 7 日問題のことは忘れる（iPhone の Safari にも影響あるので忘れにくいことではある）
+
+1. JavaScript から Cookie をセットせずに、専用の API を用意して Set-Cookie させる（検証が必要）
+
+## 参考記事
+
+[ITP2.1対策　Safari 12.1 でCookieの有効期限を8日以上に延長する方法 - Qiita](https://qiita.com/yossaito/items/6ffb1b8bb3f9d91107b8)
+
+[【一問一答】Appleの「 ITP2.2 」とは？：ファーストパーティクッキーを24時間で消去 - ライブドアニュース](https://news.livedoor.com/article/detail/16456042/)

docs/nuxt/Nuxt.jsを使ったログイン周りの仕組みについて.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` を削除します