React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

JavaScript

JavaScriptでログイン後に指定のURLへ飛ばす方法 | React, Redux

0
0

この前、非ログイン時に指定の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に値が入るときは、非ログイン時に、指定した画面へ移動したときだけなので、

 

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

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-JavaScript

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.