-
Notifications
You must be signed in to change notification settings - Fork 10
Nuxt.jsを使ったログイン周りの仕組みについて
リクエスト時 ブラウザ → 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 サーバ → API サーバ
と経由する
ブラウザ → SSR サーバ 間
は、 cookie
に token
がないので渡せません
SSR サーバ → API サーバ 間
は、 リクエストヘッダ
に token
がない状態で渡します
レスポンス時 ブラウザ ← SSR サーバ ← API サーバ
と経由する
SSR サーバ ← API サーバ 間
は、 レスポンスヘッダ
に token
を付与しません
ブラウザ ← SSR サーバ 間
は、 vuex の state に token
がないので、 cookie
から token
を削除します
ベースの挙動は 未ログイン状態でブラウザでリロードした場合(SSR)
と同じですが、その後、authenticated ミドルウェアによりログイン必須画面に未ログイン状態で遷移したので、サインイン画面にリダイレクトします
リクエスト時 ブラウザ → API サーバ
と経由する
ブラウザ → API サーバ 間
は、 リクエストヘッダ
に cookie
から取得した token
を付与して渡します
レスポンス時 ブラウザ ← API サーバ
と経由する
ブラウザ ← API サーバ 間
は、 レスポンスヘッダ
に token
を付与して返します
そのまま token
を cookie
に保存します
リクエスト時 ブラウザ → API サーバ
と経由する
ブラウザ → API サーバ 間
は、 cookie
に token
がないので リクエストヘッダ
に token
がない状態で渡します
レスポンス時 ブラウザ ← API サーバ
と経由する
SSR サーバ ← API サーバ 間
は、 レスポンスヘッダ
に token
を付与せず、 vuex の state に token
がないので、 cookie
から token
を削除します
ベースの挙動は 未ログイン状態でブラウザで SPA した場合(CSR)
と同じですが、その後、authenticated ミドルウェアによりログイン必須画面に未ログイン状態で遷移したので、サインイン画面にリダイレクトします
anonymous ミドルウェアが「すでにログインしていたらトップにリダイレクトする」を担う
リクエストヘッダ
に token
がない状態でリクエストします
cookie
から token
を削除します