0
votes

Le formulaire de connexion ne peut pas obtenir de données de back-end dans réaction

in réagir lorsque j'entraîne une valeur de la valeur dans le champ de texte, vous ne pouvez pas valider le courrier électronique et le mot de passe de l'utilisateur à partir de l'arrière-plan.

i enregistrer les utilisateurs de réagis, stockez ces utilisateurs à l'arrière, mais mon exigence est quand j'essaie de Connectez-vous à l'utilisateur non enregistré, puis montre-moi erreur user_name_name_name et mot de passe incorrect. Mais dans mon cas, il suffit de rediriger la page Impossible de vérifier les utilisateurs de Back-end. P>

Veuillez vérifier le code et mettre à jour le code et m'informerez-moi quel est le problème. Merci d'avance. P>

Connexion du contrôleur utilisateur Fonction dans CodeDIGNITiter P>

import React, { Component } from 'react';
import { Link,Redirect } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import {PostData} from './PostData';
class Login extends Component {
  constructor(props){
    super(props);
    this.state = {
      user_email:'',
      Password:'',
      redirect :false
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
}

handleSubmit(event){
  event.preventDefault()
  if(this.state.user_email && this.state.Password){
      PostData('login',this.state)
  }
}

handleChange = (event) =>{
  const name  = event.target.name
  const value = event.target.value
  this.setState({ [name]:value })
}
  render() {
    if (this.state.redirect){
      return <Redirect to='/dashboard'/>
    }
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <Form  onSubmit={this.handleSubmit} >
                      <h1>Login</h1>
                      <p className="text-muted">Sign In to your account</p>
                      <InputGroup className="mb-3">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="icon-user"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="email" placeholder="Email" name="user_email" value={this.state.user_email} onChange={this.handleChange} autoComplete="username" required />
                      </InputGroup>
                      <InputGroup className="mb-4">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="icon-lock"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="password" placeholder="Password" name="Password" value={this.state.Password} onChange={this.handleChange} autoComplete="current-password" required />
                      </InputGroup>
                      <Row>
                        <Col xs="6">

                          <input  type="submit" color="primary" value="Login" className="px-4" />

                        </Col>
                        <Col xs="6" className="text-right">
                          <Button  color="link"  className="px-0">Forgot password?</Button>
                        </Col>
                      </Row>
                    </Form>
                  </CardBody>
                </Card>
                <Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
                  <CardBody className="text-center">
                    <div>
                      <h2>Sign up</h2>
                      <p>welcome here i do many works for you just sign in then start working.</p>
                      <Link to="/register">
                        <Button color="primary" className="mt-3" active tabIndex={-1}>Register Now!</Button>
                      </Link>
                    </div>


        <p>Error:{this.state.error}</p>
                      </CardBody>
                    </Card>
                  </CardGroup>
                </Col>
              </Row>
            </Container>
          </div>
        );
      }
    }

    export default Login;


0 commentaires

3 Réponses :


0
votes

Vous devez mettre à jour cette partie: xxx

au lieu de rediriger vers le tableau de bord (par réglage redirect au true ) quelle que soit la réponse Du backend (bon ou mauvais), vous devez créer une condition en fonction du code d'état reçu.

Par exemple, en cas de réponse avec un statut 200, vous redirigez effectivement tableau de bord mais si vous obtenez un autre statut, vous pouvez afficher un message d'erreur à l'utilisateur par exemple.


9 commentaires

ne fonctionne pas pour moi s'il vous plaît vérifier à nouveau que je mettant à jour le code total ajoute également le code arrière dedans


Avec Fetch , une erreur d'une demande ne jette pas nécessairement une erreur. Vous devez vérifier que votre fetch a vraiment réussi comme dans cet exemple de MDN Fetch (" http: // localhost / API / UserController / userLogin ", option S) .Ce (res => res.json ()). ensuite (réponse => { Si (! Response.ok) {/ * Erreur de la poignée * /} else {/ * rediriger * /}})


M'y erreur, vous devez vérifier réponse.ok avant même d'appeler réponse.json () . Inverser les deux puis S dans mon commentaire précédent.


Veuillez mettre à jour votre code, ce que vous pouvez dire. Merci


Fetch ("http: // localhost / API / UserController / userLogin", option S) .Ce (réponse => {if (! Response.ok) {lancer une nouvelle erreur ("erreur")} else {retour res}}). ensuite (res => res.json ()). Catch (err => / * Afficher le message d'erreur * /) Avez-vous essayé?


Dans ce cas, monsiez-moi le même message qui me montre avant .... JSON Statut Succès Success Message utilisateur Connexion utilisateur de réponse avec succès Réponse de la charge utile 1 {"Statut": "Succès", "Message": "Connexion utilisateur avec succès"}


Pourquoi le code ne peut pas valider les utilisateurs de la base de données? Mon exigence est lorsque l'utilisateur Essayez de vous connecter si vous ne souhaitez pas enregistrer, puis indiquez votre email et votre mot de passe incorrect lorsque vous vous inscrivez, essayez d'abord de vous connecter. Il sera login, comment j'essaie de faire cette logique i 'm tellement confus.Quelle je peux faire ensuite me dire monsieur monsieur?


Le problème initial vient de l'utilisation de récupération que vous avez eu. Je vous ai suggéré de faire quelque chose qui devrait fonctionner. De cela, vous pouvez construire votre logique frontale. Je ne sais pas que je suive où vous avez toujours un problème.


J'ai un problème simple lorsque vous tapez mauvais email puis rediriger la page



0
votes

Tout d'abord, vous devez vérifier la réponse de l'API. Sur la base de celle-ci, vous pouvez naviguer sur l'utilisateur au tableau de bord.

Par exemple:

Si les informations d'identification de connexion sont correctes. Ensuite, je retournerai la réponse ci-dessous xxx

si les informations d'identification de connexion sont incorrectes. xxx

Vous devez modifier cette partie < / p> xxx


5 commentaires

ne fonctionne pas pour moi s'il vous plaît vérifier à nouveau que je mettant à jour le code total ajoute également le code arrière dedans


Pouvez-vous s'il vous plaît poster la réponse de l'API de connexion?


Ouais bien sûr dans la console montre-moi {user_email: "ss", mot de passe: "ss"} login.js: 281 Promise {: {...}}: Promise [[PROMISESTATUS]]: "RÉSOLVÉE" [[PROMISEVALUE]] : ObjectMessage: «Connexion utilisateur» Statut: «Succès»: Objet Login.js: 272 {User_email: «Sulman@gmail.com», Mot de passe: «12345»} Login.js: 281 Promise {: {... }}


monsieur je peux mettre à jour le code et ajouter une réponse aussi s'il vous plaît vérifier ci-dessus


Utilisez mon code ci-dessus. mettre la console.log (réponse) Envoyez-moi la réponse.



0
votes
const state = this.state.redirect;

if(state){
  return <Redirect to="dashboard" />
}

1 commentaires

Je pense que vous pouvez dire que ce code ne me redirige peut-il que ce que je fais de la première vérification de la validation, puis redirige vers le tableau de bord?