Let me start by giving you a heads-up of me being a total noob in ReactJS.
I have this back-end code for the login page written in nodejs:
app.post("/login", (req, res) => {
const { username, pass } = req.body;
sqlLoginuser = "SELECT * FROM users WHERE username = ?"
db.query(sqlLoginuser, [username], (error, results) => {
if (error) throw error;
if (results.length === 0) {
return res.status(401).json({ message: "Username or password is incorrect" });
}
const user = results[0];
bcrypt.compare(pass, user.pass, (error, result) => {
if (error) throw error;
if (!result) {
return res.status(401).json({ message: "Username or password is incorrect" });
}
const token = jwt.sign({ userId: user.id }, JWT_SECRET, { expiresIn: "1h" });
res.status(200).json({
token,
isAdmin: user.is_admin,
message: "User logged in successfully",
});
});
}
);
});
I want to save the value of isAdmin sent by the backend from the database after a user is logged in in this Login page:
import React, { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import axios from "axios";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const Login = () => {
const [username, setUsername] = useState("");
const [pass, setPass] = useState("");
const [isAdmin, setIsAdmin] = useState(null);
const navigate = useNavigate();
const handleSubmit = async event => {
event.preventDefault();
try {
const response = await axios.post("http://localhost:5000/login", {
username,
pass
});
const isAdmin = response.data.isAdmin;
setIsAdmin(isAdmin);
toast.success("Te-ai logat cu succes")
localStorage.setItem("token", response.data.token);
setIsAdmin(response.data.isAdmin)
navigate("/ip");
setTimeout( () => {window.location.reload()}, 2000) ;
} catch (error) {
toast.error(error.response.data.message);
}
};
return (
<div style={{ marginTop: "150px" }}>
<form style={{
margin: "auto",
padding: "15px",
maxWidth: "400px",
alignContent: "center"
}}
onSubmit={handleSubmit}>
<div>
<label htmlFor="username">Username:</label>
<input
type="text"
id="username"
placeholder="Username"
value={username}
onChange={(event) => setUsername(event.target.value)}
/>
</div>
<div>
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
placeholder="Password"
value={pass}
onChange={(event) => setPass(event.target.value)}
/>
</div>
<input type="submit" value={"Login"} />
<Link to="/register">
<input type="button" value="Fa-ti cont"/>
</Link>
</form>
</div>
);
};
export default Login;
So that I can later use it’s value in other pages, let’s say for example in this page:
import React, { useState, useEffect } from 'react';
import ReactPaginate from 'react-paginate';
import { Link } from 'react-router-dom';
import './home.css';
import { toast } from 'react-toastify';
import axios from 'axios';
const IP = ({location}) => {
const isAdmin = location.state?.isAdmin;
const [isLoading, setIsLoading] = useState(0);
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const itemsPerPage = 10;
const handleClick = () => {
setIsLoading(true);
// Make a request to the backend to extract the information and store it in a text file
axios.get("http://localhost:5000/extract-ip")
.then(response => {
if (response.status !== 200) {
throw new Error("Failed to extract data!");
}
const data = response.data;
const file = new Blob([data], { type: 'text/plain' });
const url = URL.createObjectURL(file)
const link = document.createElement('a');
link.href = url;
link.download = 'ip.txt';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
setIsLoading(false);
})
.catch(error => {
console.error(error);
setIsLoading(false);
});
};
// code for fetching the users from the node.js backend to bring them to the frontend
const loadData = async () => {
const response = await axios.get(`http://localhost:5000/ip?page=${currentPage}`);
setData(response.data.data);
setTotalPages(response.data.totalPages);
};
useEffect(() => {
loadData();
});
const deleteIp = (id) => {
if (
window.confirm("Stergeti intrarea?")
) {
axios.delete(`http://localhost:5000/delete-ip/${id}`)
toast.success("Intrare eliminata cu succes!")
setTimeout(() => loadData(), 500);
}
}
const handlePageClick = (pageNumber) => {
setCurrentPage(pageNumber);
}
return (
<div style={{ marginTop: "50px" }}>
<Link to="/addIp">
<button className="btn btn-ip">Add IP</button>
</Link>
<table className='styled-table'>
<thead>
<tr>
<th style={{ textAlign: "center" }}>No.</th>
<th style={{ textAlign: "center" }}>IP address</th>
<th style={{ textAlign: "center" }}>Added on</th>
<th style={{ textAlign: "center" }}>Added by</th>
<th style={{ textAlign: "center" }}>Action</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => {
const startIndex = (currentPage - 1) * itemsPerPage;
const rowNumber = startIndex + index + 1;
return (
<tr key={item.id}>
<th scope="row">{rowNumber}</th>
<td>{item.ip_address}</td>
<td>{item.creation_date.replace("T", " ").replace("Z", "").replace(".000", "")}</td>
<td>{item.published_by}</td>
<td>
{isAdmin === "1" ?
<>
<Link to={`/update-ip/${item.id}`}>
<button className="btn btn-edit">Edit</button>
</Link>
<button className="btn btn-delete" onClick={() => deleteIp(item.id)}>Delete</button>
<button className="btn btn-edit" disabled={isLoading} onClick={handleClick}>{isLoading ? "Loading..." : "Extract Data"}</button>
</>
:
<>
<Link to="/addIp">
<button className="btn btn-ip">Add IP</button>
</Link>
</>
}
</td>
</tr>
)
})}
</tbody>
</table>
<div className="pagination">
<ReactPaginate
pageCount={totalPages}
pageRangeDisplayed={5}
marginPagesDisplayed={2}
onPageChange={(data) => handlePageClick(data.selected + 1)}
containerClassName={"pagination"}
activeClassName={"active"}
/>
</div>
{/* <Link to="/">
<button className="btn btn-ip">Back</button>
</Link> */}
</div>
)
}
export default IP;
First I try to save the value as a cookie, encrypt it(security) and then decrypt it to use the real value which can be a 0 or a 1. I tried to use the jose library to achieve this, but failed(because i am a complete noob).
From what I understood from multiple sources, this can be achieved by using props, only that I don’t know how I can achieve this, I tried to follow multiple tutorials, but failed lamentable.
I’m getting frustrated and I can’t accomplish what I want.
Can you please help me figuring this out?
A little guidance will be of so much help, as I said, I am a complete noob in React.
Are there multiple ways of achieving what I want?
Thank you in advance guys!