ログアウト処理を実装するとき、パラメータも特にないしGETで良いか、と思ってGETで実装してしまったが間違いだった。
- Cookieの削除は副作用だからログアウト処理はGETで実装すべきでない
- プリフェッチによる誤爆が起きるからログアウト処理はGETで実装すべきでない
POSTとかDELETEあたりが良いのだと思う。
プリフェッチによる誤爆について
Next.jsを使ったWebアプリケーションでログイン処理後、認証のCookieが一瞬で消える問題が起きた。
以下のようなことを調べた。
| 確認内容 | 確認結果 |
|---|---|
| 環境の違い | 開発環境では発生せず、本番環境でのみ発生した→環境依存だとわかった |
| Cookieの有効期限などの設定の再確認 | 問題は見られなかった→ブラウザ側でなくアプリケーション側で削除している可能性が浮上した |
| ログアウト処理をコメントアウトしてみる | 認証のCookieが一瞬で消える問題がなくなった→意図せずログアウト処理を動作させている事がわかった |
結局この問題はNext.jsが悪いのではなく、Next.jsへの理解不足によるものだった。
原因
- Automatic prefetchを知らなかったこと
- ログアウト処理をGETメソッドで実装していたこと
- ログイン後のダッシュボード画面に
<Link>でログアウト処理のリンクを貼っていたこと
Automatic prefetchについて
Automatic prefetchは以下にある通り、画面上にある<Link>のリンク先のページを自動的に取得する。
When navigating between routes, the browser requests assets for the page like HTML and JavaScript files. Prefetching is the process of fetching these resources ahead of time, before you navigate to a new route.
ルート間を移動する際、ブラウザはHTMLやJavaScriptファイルなどのページのアセットをリクエストします。プリフェッチとは、新しいルートに移動する前にこれらのリソースを事前に取得するプロセスです。
Next.jsは以下にある通り、本番環境でAutomatic prefetchを有効にする。
Automatic prefetching runs only in production. Disable with prefetch={false} or use the wrapper in Disabled Prefetch.
自動プリフェッチは本番環境でのみ実行されます。Disabled Prefetchprefetch={false}で無効にするか、ラッパーを使用してください。
というわけで以下のような流れで問題が起きていた。
- ログインする
- ログイン処理で認証のCookieを設定する
- ダッシュボード画面に遷移する
- Next.jsがダッシュボード画面にあるログアウト処理へのリンクをプリフェッチし、認証のCookieを削除する処理を実行する
- 認証のCookieが消える
対策1: ログアウト処理のリンクについてAutomatic prefetchを無効にする
短絡的な解決方法。prefetch={false}を付与すればAutomatic prefetchを無効にできる。
<Link href="/logout" prefetch={false}>ログアウト</Link>
勝手にログアウト処理が走ることはなくなった。
対策2: ログアウト処理をGETで実装しない
ネットで調べて、ログアウト処理をGETで実装すべきでないと主張する勢がいることを知った。
主張の理由には以下のようなものが挙がっていた。
- Cookieの削除は副作用だからログアウト処理はGETで実装すべきでない
- プリフェッチによる誤爆が起きるからログアウト処理はGETで実装すべきでない
自分はまんまと2に引っかかってしまった。