Nuxtでリダイレクト時に見えてはいけないページが一瞬チラ見えする問題の解決方法

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

非ユーザが会員ページのURLを直接入力してダイレクトに認証が必要なページにアクセスした場合、リダイレクト処理を行い、トップページへと戻すようにしている。

ところが、リダイレクト時に見えてはいけない会員ページ(リダイレクト先のページ)が一瞬だけチラ見えしてしまうという問題が発生したので、その解決策をまとめる。

結論から言うと、middlewareフォルダのauthenticated.jsにて、以下のようにpromiseをreturnさせるようにしたら、チラ見えは解決した。

今回の問題は、トップページへのリダイレクト処理が完了する前に、会員ページのレンダリング結果が一瞬見えてしまうことにある。

そこで、Promiseを使って、リダイレクトが完了するまで、ブラウザの描画を待機させるようにした。

 

参考

https://www.yo1000.com/nuxt-spa-redirect/

https://qiita.com/sendaiharu1/items/22641ffb1f385fd8ca3f

コメントを残す

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