[react]fetch関数を使用して登録とログインを実現

11434 ワード
テキストリンク
1.全体の流れ
2.fetch関数
3.Backendとの通信

1.全体の流れ



1)ユーザーが電子メールを入力します.Email InputのonChange関数の実行
2)Email InputのonChangeをvalue関数で更新する
3)ユーザーはパスワードを入力する.Password InputのsetState関数の実行
4)Password InputのonChangeをonChange関数で更新する
5)Buttonをクリックしてvalue関数を実行
6)setState関数においてonClick関数によりサーバに要求を送信する
7)サーバは認証/認証後の結果を応答に返信する
8)応答結果に従ってMainページに移動またはエラーメッセージを表示する

2.fetch関数

fetch("api주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id,
        password: this.state.pw,
      }),
    })
      .then((response) => response.json())
      .then((result) => console.log("결과: ", result));
1)第1パラメータはapiアドレスであり,第2パラメータはhttp通信に関する内容である.
2)2番目のパラメータ
  • メソッド入力GET、POST、PATCHなどのhttpメソッド
    • .
  • JSON形式でデータを送受信し、bodyに入れる
    ->通信時にはonClick形式のJSONに送信する必要があるため、fetchという方法で既存のオブジェクトからStringにフォーマットを変換する(
    • )
  • 通信は他の論理よりも長い時間を要するため、非同期処理はstring
    • を用いる
    .then((response) => response.json())
    3)最初のthenはサーバから送信された応答をオブジェクトに変換する
    .then((result) => console.log("결과: ", result));
    4)2番目に応答をオブジェクトのコンソールに変換します.ロゴで確認します.
  • 必要な論理を実現
    ->たとえば、
    ログインに成功したらホームページに移動
    ログインに失敗した場合は、alertウィンドウで「ユーザー名またはパスワード」を確認します.フロート

    • 3.Backendとの通信


  • フロンテンドとBackendが同じネットワーク上にあることを確認する必要があります
    *ex)WEB Wi-Fiに接続されているか確認する

  • 画面にidとpwを入力する入力があります

  • 入力後に「ログイン」ボタンを押してバックエンドログインapiを呼び出す
    • fetch('http://10.00.0.00:8000/user/signin', {
  method: 'POST',
  body: JSON.stringify({
    email: this.state.idValue,
    password: this.state.pwValue,
  }),
})
  .then(response => response.json())
  .then(result => {
    if (result.MESSAGE === 'SUCESS') {
      localStorage.setItem('token', result.token);
      this.props.history.push('/Main');
    } else {
      alert('아이디나 비밀번호를 확인해주세요');
    }
  });
  • ログイン成功
    -バックエンド:正常id/pwの場合のみaccesstokenを送信
    -フロント:alertを使用してログイン完了メッセージを表示し、localStorageに保存
    • fetch('http://10.00.0.00:8000/user/signin', {
  method: 'POST',
  body: JSON.stringify({
    email: this.state.idValue,
    password: this.state.pwValue,
  }),
})
  .then(response => response.json())
  .then(result => console.log('결과: ', result));
  • ログインに失敗しました
    -バックエンド:msgを
    -フロント:受信したメールをalertと表示
    • <ソース>wecode(コード起動キャンプ)セッション
    [ばね動作]7RESTサービスの使用
    第3週コード状態/ツイッターアップロード(CSS)