この前、非ログイン時に指定のURLへアクセスし、非ログインなので入れず、ログイン画面へ飛ばされた後に、

ログイン後に、先ほどアクセスしようとしてたURLへ移動させたいという処理を実装したときの考察です。

urlの保持には何を使うか

最初、クッキーかJWTを使おうかと考えましたが、小さい処理で一々サーバーに再度負荷をかけたくないし、

ログイン確認にサーバー通信してるので二度手間になり、サーバー側でクッキーの判断してるので、

ローカルストレージでいい、ローカスストレージを使いました。

こうすると、指定したページで柔軟な対応ができるほか、全てのurlを監視することもなく、

ユーザーにとって重要な場所のみ、リダイレクトさせることが出来ます。

フロント側での実装

ReactとReduxのプロジェクトでしたが、ちょうど /page のフロント側で、ログイントークンの有無を確認して、

ログイントークンがなければ、ログイン画面にリダイレクトされるので、このタイミングで、urlの保持をローカルストレージで持たせました。

こんな感じ。

if (!token) {
localStorage.setItem('urlPath', window.location.pathname)
}

トークンがなければ、ローカルストレージにurlのパスをセットします。

その後、ログインすると、通常はトップ画面とかマイページに飛ぶところ、

先ほどの、パスがurlに保存されてた場合、それを確認して、パスがあればそっちに飛ばすようにします。

if (!localStorage.getItem('urlPath') === false) {
dispatch(push(`${localStorage.getItem('urlPath')}`))
localStorage.removeItem('urlPath')
}

それで、一回パスへ飛ばしたらローカルストレージは削除です。

dispatch(push というのは画面へリダイレクトさせるもので、あなたの環境に寄って変えてください。

これで、もう一回、本来ログイン後に飛ぶマイページとかトップページに再度移動しても、

ローカルストレージのキーがないので、そのまま通常の動きになります。

ローカルストレージのurlPathに値が入るときは、非ログイン時に、指定した画面へ移動したときだけなので、

問題ないかなと思います。