Nuxtでリロード時にユーザ情報が消失する問題の解決

最終更新日:2020年2月22日 Nuxt

Nuxt+firebaseでログイン機能を実装したのだが、会員ページでリロードしたり、会員ページから別のページに移動した場合、ログインユーザ名等のstoreに格納されている情報が消えてしまう問題に直面した。

そこで、ページを読み込む際に、ログインユーザかどうかをチェックし、会員ユーザであればstoreにログイン情報を再度セットしてからページが表示されるようにした。

まずは、会員ページにて、middlewareプロパティを設定する。

そして、middlewareフォルダのauthenticated.jsにて、ページを移動する際は、firebaseにユーザ登録されているかをチェックする。

ここで、会員であるなら、会員名をストアに保存しページを移動する。

非会員は、トップページにリダイレクトさせる。

上記により、以下の問題が解決した。

・非会員がURL入力で会員ページにダイレクトアクセスする件

・会員ページでリロードすると、ストアからユーザ情報が消失する件

・会員ページからトップページに移動した際、ストアからユーザ情報が消失する件

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です