2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ReactとNode.jsでログイン処理を実現するために行ったこと

Last updated at Posted at 2021-12-30

こんばんは。初めての投稿になります。

今回は、JavaScriptのlocalStrageというAPIを使用してログイン処理を実現したため、実際に行ったことを書いていきたいと思います。

【実際に行ったこと】
1.ログイン画面から任意のデータをサーバ側(Node.js)に送信し、サーバ側でログイン認証処理を行う。ログインできた場合、200レスポンスを返す。

2.クライアント側(React)にログインOKのレスポンスが返ってこない場合は何もしない。帰ってきた場合はlocalStrage APIを用いて次のように値をセットする。私は"Login"という値と、該当ユーザのIDをセットしました。
スクリーンショット 2022-01-10 223722.png

3.クライアント側にlocalStrageに'Login'が入っている場合はログイン状態を保持し、'Login'以外の値が入っているまたは何も入っていない場合は保持しない処理を記述する。
スクリーンショット 2022-01-10 224135.png

簡易的な方法ではありますが、これでブラウザを再読み込みしようが、ページを離れようが、ログイン状態が維持されます。cookieとは違い、localStrageは一度データが保存されると消去しない限り消えないためその点は注意してください。

以上です。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?