Question

在React中，当我在文本字段中输入任何值时，则无法从后端验证用户电子邮件和密码。

我注册用户的反应是，将这些用户存储在后端，但是我的要求是当我尝试登录未注册的用户时，向我显示错误的用户名和密码错误。但就我而言，仅重定向页面无法从后端检查用户。

请检查代码并更新代码，并告知我其中有什么问题。预先谢谢你。

codeIgniter中的用户控制器登录功能

public function login()
  {
      header("Access-Control-Allow-Origin: *");
      header("Access-Control-Request-Headers: GET,POST,OPTIONS,DELETE,PUT");

      $user_email = $this->input->post('user_email');
      $Password   = $this->input->post('Password');

      $row = $this->Usermodel->login_mode($user_email);
      var_dump( $row);
      if (count($row) > 0) {
          //verify password

          if (password_verify($Password, $row['Password'])) {

              $response = array(
                  "status" => 'success',
                  'message' => "User Login successfully"
              );
          } else {

              $response = array(
                  "status" => 'error',
                  'message' => "Password and Username does not match"
              );
          }

      } else {

          $response = array(
              "status" => 'error',
              'message' => 'Account does not exist'
          );

      }

        $this->output->set_content_type('application/json')->set_output(json_encode($response));
  }

用户模型登录功能

public function login_mode($user_email){
      $query = $this->db->get_where('users',$user_email);
      echo $query->row_array();
  }

PostData.js

export function PostData(type,userData){
  let headers = new Headers();

  let BaseUrl = 'http://localhost/API/UserController/'
  return new Promise((resolve,reject)=>{
    fetch(BaseUrl+type ,{
      method:'post',
      'Content_type':'application/json',
      body:JSON.stringify(userData),
      headers
    })
    .then((response)=>{
      response.json()
    })
    .then((responseJson)=>{
      resolve(responseJson)
    })
    .catch((error)=>{
      reject(error)
    })
  })
}

login.js Reactjs代码

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;

Answer 1

您应该更新此部分：

fetch("http://localhost/API/UserController/Userlogin",options)
    .then(this.setState({
      user_email : '',
      Password   : '',
      redirect   : true
    }))

无论后端如何响应（好还是坏），都无需重定向到仪表板（通过在redirect上设置true），而是应根据收到的状态码来创建条件。

例如，在响应状态为200的情况下，您确实重定向到Dashboard，但是如果获得其他状态，则可以向用户显示错误消息

Answer 2

首先，您需要检查API的响应。基于此，您可以将用户导航到仪表板。

例如：

如果登录凭据正确。然后，我将在下面返回响应

{
 error: false,
 message: "User has logged in successfully"
 data: {
  .....
 }
}

如果登录凭据错误。

{
 error: true,
 data: {}
 message: "Please check the Username and Password"
}

您需要修改此部分

fetch("http://localhost/API/UserController/Userlogin",options)
.then(res => res.json())
.then(response => {
  if (!response.error) {
    this.setState({
      user_email : '',
      Password   : '',
      redirect   : true
    });
  } else {
    this.setState({
        user_email : '',
        Password   : '',
        redirect   : false
      });
  }
})
.catch(err=>console.log(err))

Answer 3

fetch("http://localhost/API/UserController/Userlogin",options)
.then(this.setState({
  user_email : '',
  Password   : '',
  redirect   : true
}))
.then(res =>console.log(res.json()))
.catch(err=>console.log(err))

问题在于，无论后端响应如何，您都将重定向设置为true。因此，当它重新渲染时，它将重定向到另一个页面。这段代码将您重定向

const state = this.state.redirect;

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

登录表单无法从React中的后端获取数据

3 个答案: