[React]~MovieApp-router2: ログイン処理を実装しよう!

こんにちは、KOUKIです。

GolangとReactでMovie Appの開発をしています。

今回は、ReactでLoginページを作成し、前回作成したLogin APIへリクエストを送信する処理を実装します。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

JWTを使ってSign-in処理を実装しました

事前準備

フォルダ/ファイル

ログイン処理

前回実装したJWTを使ったログイン処理の実装を行います。

ログイン/ログアウトボタンの設置

まずは、UI部分から攻めていきます。

画面の右上に「ログイン/ログアウト」ボタン(リンク)を設置しましょう。

useStateを使って、JWTの値をStateに保存するようにしました。ログイン/ログアウトボタンの表示切り替えはこのJWTに値が入っているか否かの判定結果で行います。

「docker-compose up」でコンテナを起動し、「http://localhost:3000」にアクセスしてください。

ページの右上に「Login」が表示されましたね。

ページ制御

「Add Movie」および「Manage Catalog」は、ログイン済みでないと表示されないようにします。

ログインページの実装

続いて、ログインページを実装します。実装する内容は今まで実装した他のコンポーネントとほぼ同じなので、さらっと書きます。

このコンポーネントをApp.tsから読み込みます。

画面を表示します。

バリデーションの設定

Email/Passwordを未設定の状態で「Login」ボタンを押下したら、バリデーションエラーにします。

Payloadの作成

ログイン情報をAPIへ送信するために、Credentialsモデルを定義します。

作成したモデルをLoginコンポーネントから読み込んで、Payloadを完成させます。

AxiosでPost通信

次に、AxiosでAPIへPost通信をします。

検証

ログイン確認をしましょう。

ログイン情報は、「cmd/api/tokens.go」ファイルに直書きしています。

  • Email: me@here.com
  • Password: password

responseが返ってきているので、成功ですね。

ログイン失敗時の挙動も見てみましょう。

  • Email: me@here.com
  • Password: pas
OKですね。

次回

次回は、JWT Tokenのハンドリングを実装しましょう

記事まとめ

参考書籍

ソースコード

Login.tsx

tokens.ts

コメントを残す