diff options
author | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-07-25 13:13:05 +0530 |
---|---|---|
committer | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-07-25 13:13:05 +0530 |
commit | e0ab73361a8bb3598ced59270e6824aa80b80b48 (patch) | |
tree | f25eb530a760b73faac631693a7e08539473d3ed | |
parent | 57ac476e3303993ea523c43b7de638d4f1ce3e85 (diff) | |
download | admin-panel-e0ab73361a8bb3598ced59270e6824aa80b80b48.tar.gz admin-panel-e0ab73361a8bb3598ced59270e6824aa80b80b48.tar.bz2 admin-panel-e0ab73361a8bb3598ced59270e6824aa80b80b48.zip |
added admin page
-rw-r--r-- | backend/index.js | 21 | ||||
-rw-r--r-- | src/App.js | 24 | ||||
-rw-r--r-- | src/components/Admin.js | 35 | ||||
-rw-r--r-- | src/components/Login.js | 4 | ||||
-rw-r--r-- | src/components/MyComponent.js | 7 |
5 files changed, 77 insertions, 14 deletions
diff --git a/backend/index.js b/backend/index.js index 090296e..54c0b4a 100644 --- a/backend/index.js +++ b/backend/index.js @@ -22,6 +22,22 @@ const users = [ }, ]; +const authenticateJWT = (req, res, next) => { + const token = req.header('Authorization').split(' ')[1]; + if (!token) { + return res.status(403).json({ message: 'Forbidden' }); + } + + jwt.verify(token, SECRET_KEY, (err, user) => { + if (err) { + return res.status(403).json({ message: 'Forbidden' }); + } + + req.user = user; + next(); + }); +}; + // Login route app.post('/login', async (req, res) => { const { username, password } = req.body; @@ -45,6 +61,11 @@ app.post('/login', async (req, res) => { res.json({ token }); }); +// Protected route example +app.get('/admin', authenticateJWT, (req, res) => { + res.json({ message: 'Welcome to the admin panel' }); +}); + app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); }); @@ -1,15 +1,27 @@ import React from 'react'; +import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'; import './App.css'; import Login from './components/Login'; +import Admin from './components/Admin'; function App() { + const isAuthenticated = () => { + return !!localStorage.getItem('jwtToken'); + }; + return ( - <div className="App"> - <header className="App-header"> - <h1>Admin Panel</h1> - <Login /> - </header> - </div> + <Router> + <div className="App"> + <Routes> + <Route path="/login" element={<Login />} /> + <Route + path="/admin" + element={isAuthenticated() ? <Admin /> : <Navigate to="/login" />} + /> + <Route path="/" element={<Navigate to="/login" />} /> + </Routes> + </div> + </Router> ); } diff --git a/src/components/Admin.js b/src/components/Admin.js new file mode 100644 index 0000000..aeb8bf6 --- /dev/null +++ b/src/components/Admin.js @@ -0,0 +1,35 @@ +import React, { useEffect, useState } from 'react'; +import axios from 'axios'; + +function Admin() { + const [message, setMessage] = useState(''); + + useEffect(() => { + const fetchData = async () => { + const token = localStorage.getItem('jwtToken'); + if (token) { + try { + const response = await axios.get('http://localhost:5000/admin', { + headers: { Authorization: `Bearer ${token}` }, + }); + setMessage(response.data.message); + } catch (error) { + console.error('Error fetching admin data', error); + } + } else { + setMessage('You are not authorized to view this page.'); + } + }; + + fetchData(); + }, []); + + return ( + <div className="Admin"> + <h2>Admin Panel</h2> + <p>{message}</p> + </div> + ); +} + +export default Admin; diff --git a/src/components/Login.js b/src/components/Login.js index c73b59a..717a3ae 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -1,10 +1,12 @@ import React, { useState } from 'react'; import axios from 'axios'; +import { useNavigate } from 'react-router-dom'; function Login() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); + const navigate = useNavigate(); // Initialize useNavigate hook const handleSubmit = async (event) => { event.preventDefault(); @@ -17,7 +19,7 @@ function Login() { const { token } = response.data; console.log('Login successful, token:', token); localStorage.setItem('jwtToken', token); - // Redirect to admin panel or another page after successful login + navigate('/admin'); // Redirect to the admin page } catch (error) { setError('Invalid credentials'); console.error('Error logging in', error); diff --git a/src/components/MyComponent.js b/src/components/MyComponent.js deleted file mode 100644 index b9434ea..0000000 --- a/src/components/MyComponent.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -function MyComponent() { - return <div>This is my component!</div>; -} - -export default MyComponent;
\ No newline at end of file |