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;
3 Réponses :
Vous devez mettre à jour cette partie: au lieu de rediriger vers le tableau de bord (par réglage Par exemple, en cas de réponse avec un statut 200, vous redirigez effectivement redirect code> au
true code>) 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. p>
tableau de bord code> mais si vous obtenez un autre statut, vous pouvez afficher un message d'erreur à l'utilisateur par exemple. p> p>
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 code>, 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 * /}}) code>
M'y erreur, vous devez vérifier réponse.ok code> avant même d'appeler
réponse.json () code>. Inverser les deux
puis code> 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 * /) Code> 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 code> 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
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: p>
Si les informations d'identification de connexion sont correctes. Ensuite, je retournerai la réponse ci-dessous p> si les informations d'identification de connexion sont incorrectes. P> Vous devez modifier cette partie < / p>
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 {
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.
const state = this.state.redirect; if(state){ return <Redirect to="dashboard" /> }
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?