導入
あるプロジェクトで、ユーザー認証が必要なフルスタックアプリケーションをNextJSを使用して開発することになりました。このサービスはチャット機能を提供し、過去のチャット履歴を初期表示時にロードする機能がありました。
開発期間はタイトでしたが、予定通りに開発を完了し、一時の安堵（あんど）を得ていました。しかし、その後すぐに一つの問題が発覚しました。
不具合
ログアウト後、別のユーザーでログインしても1つ前のユーザーのチャット履歴が表示されてしまっていました。。。
業務アプリで秘匿情報を扱うため、リリース前に気づいて良かったと思います…
不具合の原因
この不具合の原因は、ログアウト処理をnext/navigationを使用してログアウト画面へ遷移させているため、Redux store内のデータがクリアされずに残ってしまっていたことにありました。
その結果、別のユーザーがログインしても、そのユーザーのチャット履歴がない場合ではRedux storeのデータが保持されてしまい、前のユーザーのデータを表示してしまう事態が発生していました。
解決策
この問題は、ログアウト処理を行う際に、Redux storeのデータもクリアすることで解決しました。具体的な実装例は以下のようになりました。
// ログアウト処理時にstoreをクリアする
const logout = () => {
store.clear();
// ログアウト処理やログイン画面へのrouting
}
終わりに
今回はNextJSを例に挙げましたが、SPAの技術では起こりやすい問題かなと思っています。ヒューマンエラーを回避するためにはいっそのことJavaScriptによるルーティングをなくしちゃえ、、、というのも個人的には全然アリだとは考えています（ただUX観点でどうなのか、、、など別の課題は出ると思いますが）
この記事を読んで、より良い実装方法や他に注意すべき点、似た事例があれば、ぜひコメントで共有いただけますと幸いです。