A
A
Anna2020-04-23 20:27:15
PHP
Anna, 2020-04-23 20:27:15

React +PHP+SQL=Authorization?

Good afternoon!
I decided to try React and PHP and combine them together in one project (needed for study and work). I got stuck on the issue of authorization, I can’t figure out which side to enter. I wrote a script in PHP that looks for a user in the database (SQL) authorizes the user. As planned, the login button (on which the authorization form pops up) for an authorized user should be replaced with his name. PHP is working, but state information (name) is not saved in React.
Tell me, please, how is it better to store information about the logged in user in React itself?
php code:

<?php 
  
  
  class userAuth {
    public $user_login = 'Guest';
    public $access = '';
    public $email = '';
  }
  
  $user_non = new userAuth;
  $user_sess=new userAuth;
  
  session_start();
  
  $database_host='localhost';
    $database_user='db';
    $database_password='password';
    $database_name='db';
  $connect = mysqli_connect($database_host, $database_user, $database_password, $database_name);
    
    
    if ($_SERVER['REQUEST_METHOD'] == 'POST') 
  {
  
    if (empty($_POST['username'])) 
    {
      echo 'Вы не ввели логин';
    }
    elseif (empty($_POST['password'])) 
    {
      echo 'Вы не ввели пароль';
    }
    else 
    {    
      $login = $_POST['username'];
      $password = md5($_POST['password']);
      $user = mysqli_query($connect, "SELECT * FROM `add_users` WHERE `user_login` = '$login' AND `user_password` = '$password'");
      $sess_user = mysqli_fetch_array($user);
          
      if (empty($sess_user['id'])) 
      {
        echo 'Введенные данные не верны';
      }
      else 
      {
        $_SESSION['password'] = $password; 
        $_SESSION['username'] = $login; 
        $_SESSION['id'] = $sess_user['id'];
        $_SESSION['access'] = $sess_user['access'];
        $_SESSION['email'] = $sess_user['user_email']; 				
                
        
        $user_sess->user_login=$_SESSION['username'];
        $user_sess->access=$_SESSION['access'];
        $user_sess->email=$_SESSION['email'];
        
        echo json_encode($user_sess);
        
      }     
    }
}else{
  echo json_encode($user_non);
}
;?>


And the code for the Header component:
import React, {Component} from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem, Jumbotron, Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label } from 'reactstrap';
import { NavLink } from 'react-router-dom';
import axios from "axios";

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
 
            user:{
                user_login:"Guest",
                access:"",
                email:""
            }
        };
  
    }
    
   componentDidMount() {
       
        axios
            .get("http://site.ru/auth.php")
              .then(({ data }) => {
            console.log(data);
                this.setState({
                user:data
                });

        });     
       
   }

    render() {
        return ( 
            <div>
            <Navbar dark expand = "md" >
                                <NavItem >
                                    <Button className={(this.state.user.user_login == 'Guest' ? '' : 'hidden')} variant="outlined" color="primary"  onClick = {this.toggleModalLogin } > < span className = "fa fa-sign-in fa-lg" > < /span> Войти</Button >
                                    <NavLink className ={"nav-link"+(this.state.user.user_login == 'Guest' ? 'hidden' : '')} to = '/admin' > < span className = "fa fa-user fa-lg" > < /span> 
                                           <span > {this.state.user.user_login} </span>
                                    </NavLink >
                                </NavItem> 
            </Navbar> 
)};

export default Header;

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question