ReactJS простая форма входа

Question

Я создаю интерфейс для базового приложения CRUD, которое будет взаимодействовать с внешним API.

Я пытаюсь создать простую форму входа, которая работает отправка запроса POST (имя пользователя и пароль) во внешний API для проверки, получения ответа и сохранения информации о пользователе в сеансе.

У нас есть список пользователей уже в нашем API. Используя такой инструмент, как Postman, я бы подтвердил, что пользователь существует, когда мы отправим правильные учетные данные и получим ответ:

POST /api/v1/login

{
  "email": "email@gmail.com",
  "password": "password123"
}

Response:
{
  "data": {
    "team_id": "0987654321",
    "name": "John",
    "email": "email@gmail.com",
    "access_token": "1234567890qwerty"
  }
}

Я новичок, чтобы реагировать, и уже давно я использую Javascript, и я не совсем понимаю, как это работает. Любая помощь будет оценена.

Извинения, если эта информация немного расплывчата.

Answer 1

Я бы использовал очень популярный http-клиент ' axios '

Установите axios в ваше приложение реакции

npm install axios --save

Добавьте этот код в функцию обработчика click \ submit вашей формы входа:

axios.post('http://[PATH_HERE]/api/v1/login', {
  "email": "email@gmail.com",
  "password": "password123"
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Answer 2

После того, как вы получите ответ от своего API, вы должны затем хранить любую не конфиденциальную информацию, которая может вам понадобиться, в вашем интерфейсе. Если вы используете что-то вроде JWT, вы можете сохранить токен в локальном хранилище и использовать библиотеку jwt-decode для его чтения.

    fetch(this.email.value, this.password.value)
    .then(res => {
        localStorage.setItem('id_token', res.token) // Store token 
    })
    .catch(err => {
        console.log(err);
    });

В реакции также довольно часто встречается служебный или вспомогательный файл, который обрабатывает вашу авторизацию

/ Utils / AuthUtility

    class AuthService{
        login(email, password) {
            return this.fetch('/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    email, 
                    password
                })
            })
              .then(res => {
                if(res.type == 'success'){
                    this.setToken(res.token) // Setting the token in localStorage
                    return Promise.resolve(res); 
                } else {
                    return Promise.reject(res)
                }
            })
        }


  // Other available methods
       setToken(idToken) {
        // Saves user token to localStorage
        localStorage.setItem('id_token', idToken)
       }

      getProfile() {
        // Using jwt-decode npm package to decode the token
        return decode(localStorage.getItem('id_token'); // assuming you have jwt token then use jwt-decode library
      }
    }

тогда в вашем логине //components/login.js

import AuthUtility from './utils/AuthUtility';

login = (e) => {


    this.Auth.login(this.email.value, this.password.value)
    .then(res => {
        this.props.history.push('/protectedRoute');
    })
    .catch(err => {
        console.log(error);
    });
}