Как войти, используя мой API в React Js

Question

Реакция JS

Я новичок, чтобы отреагировать JS

В моем API есть имя пользователя и пароль. Если пользователь залогинен, нужно подтвердить из моего значения json

 handleSubmit(e) {

fetch('https://randomuser.me/api?results=1')
  .then((response) => {
    return response.json()
      .then((json) => {
        if (response.ok) {
          return Promise.resolve(json)
        }
        return Promise.reject(json)
      })        
  })

Предупреждение (JSON) не работает, чтобы проверить результат. Как я могу получить имя пользователя и пароль в ответе?

А как перейти на следующую страницу, если пользователь успешно вошел в систему?

Мой полный код

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

const ReactCSSTG = CSSTransitionGroup;

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isVisible: true
    }
    // Bindings
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemount = this.handleRemount.bind(this);
  }


  handleSubmit(e) {
    alert("dsa");

    fetch('https://randomuser.me/api?results=1')
      .then((response) => {
        return response.json()
          .then((json) => {
            if (response.ok) {
              return Promise.resolve(json)
            }
            return Promise.reject(json)
          })            
      })


  }
  handleRemount(e) {
    this.setState({
      isVisible: true
    }, function () {
      console.log(this.state.isVisible)
    });
    e.preventDefault();
  }


  render() {

    // const for React CSS transition declaration
    let component = this.state.isVisible ? <Modal onSubmit={this.handleSubmit} key='modal' /> : <ModalBack onClick={this.handleRemount} key='bringitback' />;

    return <ReactCSSTG transitionName="animation" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
      {component}
    </ReactCSSTG>
  }
}

// Modal
class Modal extends React.Component {

  render() {

    return <div className='Modal'>
      <Logo />
      <form onSubmit={this.props.onSubmit}>
        <Input type='text' name='username' placeholder='username' />
        <Input type='password' name='password' placeholder='password' />
        <button> Sign In</button>
      </form>

      <a href='#'>Lost your password ?</a>
    </div>
  }
}

// Generic input field
class Input extends React.Component {
  render() {
    return <div className='Input'>
      <input type={this.props.type} name={this.props.name} placeholder={this.props.placeholder} required />
      <label htmlFor={this.props.name}></label>
    </div>
  }

}

// Fake logo
class Logo extends React.Component {
  render() {
    return <div className="logo">
      <i><img src={logo} className="App-logo" alt="logo" /></i>
      <span> Test </span>
    </div>
  }
}

// Button to brind the modal back
class ModalBack extends React.Component {
  render() {
    return (
      <button className="bringitback" onClick={this.props.onClick} key={this.props.className}>Back to login page!</button>
    );

  }
}


export default App;

Заранее спасибо!

Answer 1

Если вы просто хотите поймать данные, это поможет вам

  fetch('https://randomuser.me/api?results=1')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Answer 2

Вот что я сделал, имейте в виду, что я настроил свой бэкэнд с помощью экспресс / узла. Я использовал Аксиос, чтобы получить из моего API.

onSubmit = (e) => {
    e.preventDefault();
    axios.get('API_PATH')
    .then(res => {
      const user = res.data[0].username;
      const password = res.data[0].password;
      const username = this.state.username;
      const passwordEntered = this.state.password;
      if(username === '' && passwordEntered === ''){
        document.getElementById('status').innerHTML = '<p>Please Enter A Valid Username and Password</p>';
      }else if(user === username && passwordEntered === password){
        document.getElementById('status').innerHTML = '';
        console.log(user, password)
      }else{
          document.getElementById('status').innerHTML = '<p>Please Enter A Valid Username and Password</p>';
      }
    })
    .catch(error => {
      console.log(error);
    });

  }

Вот форма, которую я использовал.

<Form
          >
              <Form.Row>
              <Form.Group as={Col}>
              <Form.Label>Username</Form.Label>
                <Form.Control
                type="text"
                name="username"
                id="username"
                value={this.state.value}
                onChange={this.handleChange}
                >
                </Form.Control>
              </Form.Group>
              <Form.Group as={Col}>
                <Form.Label>Password</Form.Label>
                <Form.Control
                type="text"
                id="password"
                name="password"
                value={this.state.value}
                onChange={this.handleChange}
                />
              </Form.Group>
              </Form.Row>
              <Button className="btn btn-sm btn-light" onClick={this.onSubmit}>
                <i style={redColor} className="fas fa-sign-in-alt"></i> Login
              </Button>
        </Form>

Answer 3

fetch('https://randomuser.me/api?results=1')
.then((response) => {
   // check for status code from service if success
   // set response in state such as login success
   this.route.navigate(['/']);
  })
.catch(error =>{
   console.log(error);
});    

})

Вывод пользователя на следующую страницу. Используйте маршрутизатор реагирования для достижения этого.

Step 1: Wrap your <App /> inside <BrowserRouter />

Теперь подтвердите ответ, если имя пользователя / пароль верны, используя сервисный вызов.

Тогда this.route.navigate(['/']);

После успешного входа пользователь перейдет на домашнюю страницу приложения.