Рабочий вход и выход, админка только для админа

Lab5/data.json

@@ -28,27 +28,19 @@
   "lines": [
     {
       "typeId": "1",
-      "price": "ххэ",
-      "count": "\\жэ",
-      "sum": "13.12.2023",
+      "price": "6гор6н",
+      "count": "апраvfvfg",
+      "sum": "12.12.2023",
       "image": "",
-      "id": 10
+      "id": 1
     },
     {
       "typeId": "1",
-      "price": "fds",
-      "count": "dsfsd",
-      "sum": "13.12.2023",
+      "price": "олнрп",
+      "count": "орпао",
+      "sum": "16.12.2023",
       "image": "",
-      "id": 11
-    },
-    {
-      "typeId": "1",
-      "price": "dfc",
-      "count": "dcv",
-      "sum": "14.12.2023",
-      "image": "",
-      "id": 12
+      "id": 2
     }
   ]
 }

Lab5/src/App.jsx

@@ -3,10 +3,9 @@ import { Container } from 'react-bootstrap';
 import { Toaster } from 'react-hot-toast';
 import { Outlet } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import React, { useEffect } from 'react';
 import Footer from './components/footer/Footer.jsx';
 import Navigation from './components/navigation/Navigation.jsx';
-
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import store from './Reducer/store'; // Путь к вашему store

Lab5/src/Reducer/ProtectedRoute.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Route, Navigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+const ProtectedRoute = ({ element: Element, adminOnly, ...rest }) => {
+  const user = useSelector((state) => state.user);
+
+  if (!user) {
+    // Если пользователь не авторизован, перенаправляем на страницу входа
+    return <Navigate to="/page5" />;
+  }
+
+  if (adminOnly && user.status !== 'admin') {
+    // Если запрошен доступ только для администраторов, но пользователь не администратор
+    return <Navigate to="/" />;
+  }
+
+  return <Route {...rest} element={<Element />} />;
+};
+
+export default ProtectedRoute;

Lab5/src/components/lines/hooks/LinesItemFormHook.js

@@ -17,7 +17,8 @@ const useLinesItemForm = (id, linesChangeHandle) => {
         const typeId = parseInt(formData.typeId, 10);
         const { price } = formData;
         const { count } = formData;
-        const sum = new Date().toLocaleDateString();
+        const sum = item && item.sum ? item.sum : new Date().toLocaleDateString();
+
         const image = formData.image.startsWith('data:image') ? formData.image : '';
         return {
             typeId: typeId.toString(),

Lab5/src/components/lines/table/Lines.jsx

@@ -35,21 +35,14 @@ const Lines = () => {
 
     const navigate = useNavigate();
 
-    const showEditPage = (id) => {
-        navigate(`/page-edit/${id}`);
-    };
-
     return (
         <>
             <ButtonGroup>
                 <Button variant='info' onClick={() => showFormModal()}>
                     Добавить (диалог)
                 </Button>
-                <Button as={Link} to='/page-edit' variant='success'>
-                    Добавить (страница)
-                </Button>
             </ButtonGroup>
-            <Select className='mt-2' values={types} label='Фильтр по товарам'
+            <Select className='mt-2' values={types} label='Фильтр'
                 value={currentFilter} onChange={handleFilterChange} />
             <LinesTable>
                 {
@@ -58,7 +51,6 @@ const Lines = () => {
                             index={index} line={line}
                             onDelete={() => showDeleteModal(line.id)}
                             onEdit={() => showFormModal(line.id)}
-                            onEditInPage={() => showEditPage(line.id)}
                         />)
                 }
             </LinesTable>

Lab5/src/components/lines/table/LinesTableRow.jsx

@@ -17,7 +17,6 @@ const LinesTableRow = ({
             <td>{line.count}</td>
             <td>{line.sum}</td>
             <td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
-            <td><a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}><PencilSquare /></a></td>
             <td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
         </tr>
     );

Lab5/src/components/navigation/Navigation.jsx

@@ -1,23 +1,24 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
-import { Container, Nav, Navbar } from 'react-bootstrap';
-import { logoutUser } from './js/userActions';
+import { Container, Nav, Navbar, Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
+import { logoutUser } from './js/userActions';
 import logo from '../../assets/logo.png';
 import './Navigation.css';
 
 const Navigation = ({ routes }) => {
   const location = useLocation();
-  const indexPageLink = routes.filter((route) => route.index === false).shift();
+  const indexPageLink = routes.find((route) => route.index === true);
   const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
   const user = useSelector((state) => state.user); // Получение пользователя из хранилища Redux
   const dispatch = useDispatch();
 
+  const isAdmin = user && user.status === 'admin'; // Проверка статуса пользователя
   const handleLogout = () => {
+    localStorage.removeItem('user');
     dispatch(logoutUser()); // Действие для выхода пользователя
   };
-
   return (
     <header>
       <Navbar expand='md' className='my-navbar'>
@@ -40,8 +41,15 @@ const Navigation = ({ routes }) => {
               ))}
             </Nav>
             <div className='user-info'>
+              {/* Кнопка для админки */}
+              {isAdmin && (
+                <Link to='/page6'>
+                  <Button variant='primary'>Админка</Button>
+                </Link>
+              )}
+              {/* Приветствие и кнопка выхода */}
               {user ? (
-                <div className='user-welcome'>
+                <div>
                   <span>Добро пожаловать, {user.username}</span>
                   <button onClick={handleLogout}>Выход</button>
                 </div>

Lab5/src/main.jsx

@@ -1,7 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter, Route, Navigate} from 'react-router-dom';
 import App from './App.jsx';
 import './index.css';
 import ErrorPage from './pages/ErrorPage.jsx';
@@ -11,7 +11,6 @@ import Page3 from './pages/Page3.jsx';
 import Page4 from './pages/Page4.jsx';
 import Page5 from './pages/Page5.jsx';
 import Page6 from './pages/Page6.jsx';
-import PageEdit from './pages/PageEdit.jsx';
 
 const routes = [
   {
@@ -43,11 +42,6 @@ const routes = [
   {
     path: '/page6',
     element: <Page6 />,
-    title: 'Админка',
-  },
-  {
-    path: '/page-edit/:id?',
-    element: <PageEdit />,
   },
 ];
 

Lab5/src/pages/Page5.jsx

@@ -1,5 +1,5 @@
 import { useForm } from 'react-hook-form';
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import axios from 'axios';
 import { useDispatch } from 'react-redux';
 
@@ -16,11 +16,20 @@ const Page5 = () => {
           password: data.password,
         },
       });
-
+      
       if (response.data.length > 0) {
         console.log('Успешный вход');
-        const userData = { username: data.login }; // Замените на данные пользователя
-      dispatch({ type: 'SET_USER', payload: userData });
+        const setUserData = (userData) => {
+            return {
+              type: 'SET_USER',
+              payload: userData,
+            };
+          };
+        const userData = {
+            username: data.login,
+            status: response.data[0].status,
+          };
+          dispatch(setUserData(userData));
       localStorage.setItem('user', JSON.stringify(userData));
         redirectToHomePage(); // Замените на вашу функцию перехода
       } else {

Lab5/src/pages/Page6.jsx

@@ -1,11 +1,17 @@
-/* eslint-disable linebreak-style */
-
+import React from 'react';
+import { useSelector, useDispatch} from 'react-redux';
+import { Navigate } from 'react-router-dom';
 import Lines from '../components/lines/table/Lines.jsx';
 
 const Page6 = () => {
-    return (
-        <Lines />
-    );
+  const user = useSelector((state) => state.user);
+  const isAdmin = user && user.status === 'admin';
+  if (!isAdmin) {
+    return <Navigate to='/' replace />;
+  }
+  return (
+    <Lines />
+  );
 };
 
 export default Page6;