#13 Реализовал разные доступы к ссылкам

planner-front/src/App.js

@@ -3,8 +3,16 @@ import {Container} from "@mui/material";
 import {useSelector} from "react-redux";
 import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
 
+const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
+  const user = useSelector(state => state.users?.user);
+  if (!isAllowed && !roles?.includes(user?.role)) {
+      return <Navigate to={redirectUrl} />
+  }
+  return children || <Outlet />;
+};
 
 const App = () => {
+    const user = useSelector(state => state.users?.user);
     return (
     <BrowserRouter>
       <Routes>
@@ -18,13 +26,70 @@ const App = () => {
               </main>
             </>
           }>
-            <Route path={"/"} element={<h1>week page</h1>}/>
-            <Route path={"/week"} element={<h1>week page</h1>}/>
-            <Route path={"/month"} element={<h1>month page</h1>}/>
-            <Route path={"/my-tasks"} element={<h1>my tasks page</h1>}/>
-            <Route path={"/workers-tasks"} element={<h1>workers tasks page</h1>}/>
-            <Route path={"/profile/:id"} element={<h1>profile page</h1>}/>
-            <Route path={"/sign-up"} element={<h1>sign-up page</h1>}/>
+
+            <Route path={"/"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>week page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/week"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>week page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/month"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>month page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/my-tasks"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>my tasks page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/profile/:id"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>profile page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/workers-tasks"} element={
+              <ProtectedRoute
+                  roles={["superuser"]}
+                  redirectUrl={"/"}
+              >
+                  <h1>workers tasks page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/sign-up"} element={
+              <ProtectedRoute
+                  roles={["superuser"]}
+                  redirectUrl={"/"}
+              >
+                  <h1>sign-up page</h1>
+              </ProtectedRoute>
+            }/>
+
             <Route path={"/log-in"} element={<h1>log-in page</h1>}/>
             <Route path='*' element={<h1>404</h1>}/>
           </Route>