Answer the question
In order to leave comments, you need to log in
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);
}
;?>
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 questionAsk a Question
731 491 924 answers to any question