如何使用 ReactJs、PHP 和 MySQL 檢查數據庫中是否存在用戶？

Question

我在 Reactjs 中創建了一個登錄頁面，並且在 PHP 中有一個 login_check 代碼。 現在我必須檢查用戶是否存在於數據庫中，如果存在，我想創建一個令牌，否則沒有。 當用戶輸入他/她的詳細信息時，我使用 jquery 發布數據。 但是每次它在控制台中給出一個抱歉的消息時都不知道數據是否被發布到 PHP 中。 這是我的代碼。

簽名文件

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom'
import axios from 'axios'
import $ from 'jquery'
class Signin extends Component {
constructor(props)
{
    super(props);
    const token = localStorage.getItem("token")

    let loggedIn = true
    if(token == null)
    {
        loggedIn = false
    }

    this.state = {
        email: '',
        password: '',
        loggedIn
    }

    this.onChange = this.onChange.bind(this)
    this.submitForm = this.submitForm.bind(this)
}

onChange(e){
    this.setState({
        [e.target.name] : e.target.value
    })
}


submitForm(e){
    e.preventDefault();
    // const { email, password } = this.state

    // if(email === "admin@123" && password === "admin")
    // {
    //     localStorage.setItem("token", "loggedIn")
    //     this.setState({
    //         loggedIn: true
    //     })
    //     console.log("Logged In!")
    // }
    // else
    // {
    //     alert("Invalid email or password!");
    //     console.log("Invalid email or password!")
    // }


        $.post("http://localhost/php-react-rest-api-crud/login_check.php", function(data){
                if(data === "1")
                {
                    localStorage.setItem("token", "loggedIn")
                    console.log("success!");
                }
                else if(data === "0")
                {
                    console.log("sorry!");
                }
            })

}
render() {
    if(this.state.loggedIn)
    {
        return <Redirect to = "/admin" /> 
    }
    return (

        <div>
            <h1>Login</h1>

            <form onSubmit={this.submitForm}>
                <input type="email" name="email" placeholder="Enter email" value={this.state.email} onChange={this.onChange}/>
                <input type="password" name="password" placeholder="Enter Password" value={this.state.password} onChange={this.onChange}/>
                <br />
                <input type="submit"/>
            </form>
        </div>
    );
  }
}

export default Signin;

login_check.php

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization, X-Auth-Token');
header("Access-Control-Allow-Methods: GET, POST");

$conn = mysqli_connect("localhost", "root", "", "farmer_portal");
if(!$conn)
{
    die('Connection error'.mysqli_connect_errno());
}


if((!isset($_POST['email'])) && (!isset($_POST['password'])))
{
   echo "0"; 
   exit();
}

$myemail = $_POST['email'];
$mypassword= $_POST['password'];


$email = "SELECT * FROM signup WHERE email='$myemail' ";
$pass = "SELECT * FROM signup WHERE password='$mypassword' ";

$myemail = stripslashes($email);
$mypassword = stripslashes($password);

$res_e = mysqli_query($conn,$myemail);
$res_p = mysqli_query($conn,$mypassword);

if(mysqli_num_rows($res_p) > 0 && mysqli_num_rows($res_e) > 0)
{
echo "1";
}
else
{
  echo "0";
}

?>

Answer 1

如果可以的話，請先了解一下您的代碼

我看到您導入 Axios 但從未使用它，而是使用 jQuery 發布您的 ajax 請求。 如果這就是您使用 jQuery 的全部目的，我強烈建議您放棄它並堅持使用 Axios。 它非常擅長它的工作。

其次，只要有可能，就盡量避免多個 SQL 請求，如果您可以使用更少的 SQL 請求，或者甚至更好，只有一個。 這兩個請求：

$email = "SELECT * FROM signup WHERE email='$myemail' ";
$pass = "SELECT * FROM signup WHERE password='$mypassword' ";

應合二為一：

$user_info = "SELECT * FROM signup WHERE email='$myemail' AND password='$mypassword'";

您還應該檢查$myemail和$mypassword的內容。 stripslashes()不足以防止 mysql 注入。 有關該主題的更多信息，請點擊此處。

永遠不要相信用戶輸入。 始終檢查您是否得到了您所期望的，在您的情況下， $myemail確實是一個電子郵件，而該password確實是一個字符串。 PHP 為此提供了兩個函數， filter_var($myemail, FILTER_VALIDATE_EMAIL)和is_string($mypassword) 。

最后，也許是最重要的一點：不要存儲非散列密碼。 PHP 提供password_hash($mypassword)來存儲密碼和password_verify($mypassword)來根據數據庫檢查您的用戶輸入。

現在回答你的問題

答案在於您的 JS 代碼：

$.post("http://localhost/php-react-rest-api-crud/login_check.php", function(data) {
    // ...
});

在 Axios 和 jQuery 中， post()函數的第二個參數應該是您的數據，即用戶電子郵件和密碼。 但是在這里，您不發送任何數據，而是直接跳轉到處理對 AJAX 請求的響應。 這就是為什么 PHP 返回“0”的原因。