Добрый день!
Я решила пощупать Реакт и PHP и объединить их вместе в одном проекте (нужно для учебы и работы). Встряла на вопросе авторизации, не могу понять, с какой стороны зайти. На PHP написала скрипт, который ищет пользователя в базе данных (SQL) авторизует пользователя. По задумке кнопка войти(по которой всплывает форма авторизации) для авторизованного пользователя должна заменится на его имя. PHP отрабатывает, но информация о состоянии(имя) не сохраняется в React.
Подскажите, пожалуйста, как это лучше хранить информацию об авторизовавшемся пользователе в самом Реакте?
Код php:
<?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);
}
;?>
И код компонента Header :
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;
Простой
Средний
Простой