●実装したいこと
nuxtServerInitでToken認証をしたあと、middlewareでルーティングをしたい。
ユーザーがいるときはトップページ、いないときはログインページに飛ばしたい。
●現在のエラー
調べてみますと、nuxtServerInitでのToken認証は確実にできています。つまりここでのコードは予想通りに動いております。
しかしmiddlewareでのログイン状態に応じたルーティングが上手くいきません。
●現在の挙動
リロードするとまずログインページが表示されます。そのあとnuxt-linkの「サインアップ」ボタンを押すと、トップページにリダイレクトされます。
●原因と質問
その原因としては、middlewareでのユーザー情報の取得ができていないからです。
以下がルーティングに関するmiddlewareの記述です。
export default function({ store, redirect, route }) { const currentPath = route.path; console.log("middlewareでのgetUser.uidは " + store.getters.getUser.uid); if ( !!store.getters.getUser.uid && (currentPath === "/auth/signup" || currentPath === "/auth/login") ) { return redirect("/"); } if ( !store.getters.getUser.uid && currentPath !== "/auth/signup" && currentPath !== "/auth/login" ) { return redirect("/auth/login"); } }
これを実行したとき、コンソールは以下の様になります。
https://gyazo.com/23cfa8ef36b7dce79e408ecfbe840d3f
つまり、middlewareでユーザー情報が取得できていないことが分かります。
そのあとにnuxt-linkの「サインアップ」ボタンを押すと、コンソールは以下の様になります。
https://gyazo.com/0f060f2a496915368b09fb69cf2b69d5
ここで初めてユーザー情報が取得され、middlewareの条件に従ってトップページにリダイレクトされます。
nuxtServerInitからページが表示されるまでの間で、Storeのユーザー情報をもとにルーティング制御をするにはどうすればいいのでしょうか?
あなたの回答
tips
プレビュー