現在、Bubbleで簡単なタスク管理ツールを開発しています。
その中で 「ブラウザの戻るボタンを押した際にログイン中の表示が残ってしまう」 という問題に当たりました。
やりたかったことと最終的な解決方法について備忘として残します。
やりたいこと：ログイン時のみヘッダーリンクを表示したい
ログイン状態ではヘッダーにリンクを表示し、未ログイン状態ではそれらを非表示にしたい。
ログイン時
未ログイン時
発生した問題：ブラウザバックでリンクが残ってしまう
ログイン後の画面である /tasks に遷移したあと、ブラウザの「戻る」ボタンで /index に戻ると、本来非表示になるはずのリンクがそのまま表示された状態になってしまう。
原因と元の実装
元々は、Reusable Header 内の Group Header Right に対して以下のような Conditional を設定していた
When Current User is logged in
しかし、ブラウザバックではセッションは維持されたままになるため、Bubble上では引き続き「ログイン中」と判断されてしまった。
結果本来表示されるべきでないリンクが残ってしまった。
解決策：Current page name を使って非表示制御
最終的に「Current page name is index のときこの要素は非表示にする」制約をConditionalに設定することで解決。
アドレスバー上は /index に見えていても、Bubble内部的には /tasks にいる状態のままになるため、/index の場合は非表示にするという設定で解消できる。
そのほか試したこと
・Custome Event の作成
Bubbleではブラウザの「戻るボタン」などのブラウザネイティブ操作をトリガーにすることができないため、イベントが発火せず断念
・Java Script を組み込む
Run JSプラグインを使ってスクリプトを書くことは可能だったが、
Bubble内部のCustom State更新やイベントのトリガーをスクリプト側から制御するのが難しく、意図した条件分岐が実現できず断念
ちなみに
むきになって戻るボタン押下時はヘッダーからリンクを消す、という実装にしましたが、
完了した後他のサイトどうなんだろうと思いRecoruで試してみたところ、戻るボタン押下時はログイン後の画面にリダイレクトしました。
それでもよかったなと少し後悔、、（勉強になったからいいですが涙）