こんばんは。初めての投稿になります。
普通のIT企業の普通の会社員です。
現在、会社とプライベートの両方でWebアプリを開発しているのですが、Reactを用いてログイン機能を実装する際、セッション管理の方法についてその実現に戸惑ってしまいました。
例えば、Node.jsとExpressで作成するアプリや、Ruby on railsで作成するアプリにはセッション管理用のミドルウェアが用意されています。その場合は純粋にそれを使ってセッション管理を実現すればいいわけですが、私はReactとNode.jsで別々にサーバを立て、Node.js(Express)をAPIサーバのように使ってアプリを開発していたため、セッション管理を実現するのにふさわしい方法が見当たらず、戸惑ってしまいました。
どうやってログイン認証を実現すればよいのか、しばらく考えたところ、「あれ？単純にNode.js側で変数をうまく使えば簡単に実装できるんじゃね？」と思い、実際にそれでログイン認証が実装できてしまったため、どういうことを行ったのかこれから説明していきます。
【実際に行ったこと】
1.node.js側で適当に変数を一つ用意する。(今回はtokenという変数を用意しました。)
2.React側でfetchメソッド(axiosでも可)を用いて、入力された情報をNode.js側にポストする。
(今回はNode.js側の「http://localhost:3001/serachID」というURLにポストしました。)
3.Node.js側のポスト先のメソッドで、React側で入力された値と、DBに格納された値が一致するか確かめる処理を記述する。
4.一致した場合、tokenに値を格納する。そして、React側に200レスポンスを返す。
5.React側に200レスポンスが返ってきた場合、ログイン認証成功処理を行う。
つまり、この変数tokenに値が何も入っていない場合、ログインしていないと判断し、
値が入っていた場合、ログインしていると判断する仕組みです。次にそれを判断するための処理を書いていきます。
6.React側でfetchメソッド(axiosでも可)を用いて、現在のログイン状態(変数tokenの状態)を取得するためのGETリクエストをNode.js側に送信します。(今回は、「http://localhost:3001/loginJudge」というURLにGETリクエストを送信しました。)
7.Node.js側でtokenに値が入っているかどうかの判定を行う処理を記述します。私は、変数tokenに値が入っていた場合1を返す処理を書きました。
8.React側に1が返ってきたら、ログイン成功状態を維持する処理を行う。
非常に簡易的な方法ではありますが、これでブラウザを再読み込みしようが、ページを少し離れようが、ログイン状態が維持されます。ついでにログイン認証も実装できてしまいました。
よかったよかった。
↧