平凡な社会人の日記

平凡な社会人の日記です。怠惰な毎日を送っております。

【Nuxt3.5.x】middlewareのなかでnavigateTo(path or url, {external: true})を使ってリダイレクトしようとすると見せたくないページが見えてしまう

これはなに？

Nuxt3にて、ページAからページBに遷移する際に、middlewareの中でnavigateToを使ってlocation.hrefまたはlocation.replaceでリダイレクトするとページBがちらっと見えてしまう現象の解決策を書きます。
発生した環境

結論

Nuxt3.6以上にしてください。

はじめに

こんにちは。最近はもっぱらフロントエンドばかり触っている3年目中途半端エンジニアのさっちゃんです。バックエンドとクラウドインフラ（AWS）もちょこちょこやります。猫が好きです。Twitter: @toshiakisan1127
さて、今回は自分が悩んだことを共有しておきます。簡単に言ってしまえばNuxt側の問題だったんですが、修正されたのが1ヶ月前と新しいこともありたどり着くまでに苦労しました。

前提：Nuxt3ではmiddlewareで、ユーザーが各ページに遷移できるかの認可をかけるのが一般的かと思います。そしてユーザーが閲覧権限を持っていなければ適切なページにnavigateToでリダイレクトしますが、ここではそのリダイレクト先のページが外部のサイトであることを想定して、navigateTo(path, {external: true}) でリダイレクトすることを考えます。

現象：indexページからSecretページに遷移する際にmiddlewareの中でリダイレクトされてログインページに遷移するが、その時にSecretページの内容が一瞬見えてしまう。

再現方法：
github.com
これをcloneしてきて、package.jsonにあるnuxtのversionを3.5.3にしてREADMEに書いてある手順を実行すれば再現できます。

調査

  • navigateToでリダイレクトするならそこで処理が終わって欲しいのに、実際は次のページのmountまで処理されている。
  • navigateToの後にsleepを入れれば白画面になり一旦問題ないが、テクニカルなのでやりたくない
  • navigateToの後にabortNavigationをすれば見せたくないページのチラ見せは無くなるが、今度は404のチラ見えが始まる。

navigateToのオプションやいろいろ試しましたが、結局このissueに辿り着きました。
github.com

やってることsetTimeoutとほぼ変わらんけど

> I like the idea of returning a never-resolving promise (return new Promise*1 for this case 👍

これ頭いいな。

これにより、次の動画のようになりました。



まとめ

Nuxtのアップデートは激しいのでissueちゃんと見よう。

## どうでもいいこと
はてなブログって動画を直接載っけられないんだな。

*1:) => {}