Блог

У меня есть приложение react, в котором есть три пользователя: функционер(сотрудник), администратор(администратор) и доцент(учитель), у каждого из которых в приложении разные маршруты, например, сотрудник не может получить доступ к маршруту учителя, и обратное тоже не может произойти … мой вопрос в том, как различать эти маршруты, чтобы знать, какой маршрут принадлежит какому пользователю, когда к ним обращаются

ниже index.js файл из папки «Маршруты» моего проекта:

 import React from 'react'; import { Switch } from 'react-router-dom'; import Route from './Route';  import Dashboard from '../pages/docentePages/Dashboard'; import SignIn from '../pages/MutualPages/SignIn'; import Profile from '../pages/MutualPages/Profile'; import Sumarios from '../pages/docentePages/Sumarios'; import ListarAulas from '../pages/docentePages/ListarAulas'; import Welcome from '../pages/MutualPages/Welcome'; import Relatorio from '../pages/docentePages/Relatorio'; import FuncionarioRelatorios from '../pages/funcionarioPages/FuncionarioRelatorios'; import FuncionarioHome from '../pages/funcionarioPages/FuncionarioHome'; import AdminHome from '../pages/AdminPages/AdminHome'; import Docente from '../pages/AdminPages/Docente';   export default function Routes() {  return (  lt;Switchgt;  lt;Route path="/" exact component={SignIn} /gt;  lt;Route path="/welcome" exact component={Welcome} /gt;  lt;Route path="/profile" component={Profile} isPrivate /gt;  lt;Route path="/docentedashboard" component={Dashboard} isPrivate /gt;  lt;Route path="/docentesumarios" component={Sumarios} isPrivate /gt;  lt;Route path="/docentelistaraulas" component={ListarAulas} isPrivate /gt;  lt;Route path="/docenterelatorio" component={Relatorio} isPrivate /gt;  lt;Route path="/funcionariohome" component={FuncionarioHome} isPrivate /gt;  lt;Route path="/funcionariorelatorios" component={FuncionarioRelatorios} isPrivate /gt;  lt;Route path="/adminhome" component={AdminHome} isPrivate /gt;  lt;Route path="/admindocente" component={Docente} isPrivate /gt;  lt;/Switchgt;  ); }   

ниже Route.js файл из папки «Маршруты» моего проекта:

 /* eslint-disable no-unused-vars */ /* eslint-disable react/jsx-props-no-spreading */ import React, { useEffect } from 'react'; // nao estava import { PropTypes } from 'prop-types'; import { Route, Redirect } from 'react-router-dom';  import AuthLayout from '../pages/_layouts/auth'; import DefaultLayout from '../pages/_layouts/default';  import { store } from '../store';  export default function RouteWrapper({  component: Component,  isPrivate,  ...rest }) {  const { adminSigned } = store.getState().auth;  const { googleDocenteSigned, googleFuncionarioSigned } = store.getState().googleAuth;   if (!adminSigned amp;amp; !googleDocenteSigned amp;amp; !googleFuncionarioSigned amp;amp; isPrivate) {  return lt;Redirect to="/" /gt;;  }   /*if ((signed amp;amp; !isPrivate) || (googleSigned amp;amp; !isPrivate)) {  return lt;Redirect to="/dashboard" /gt;;  }*/   if (googleDocenteSigned amp;amp; !isPrivate) {  return lt;Redirect to="/docentedashboard" /gt;;  }   if (googleFuncionarioSigned amp;amp; !isPrivate) {  return lt;Redirect to="/funcionariohome" /gt;;   }   if(adminSigned amp;amp; !isPrivate) {  return lt;Redirect to="/adminhome" /gt;;  }   // const Layout = signed || googleSigned ? DefaultLayout : AuthLayout;   const Layout = adminSigned || googleDocenteSigned || googleFuncionarioSigned ? DefaultLayout : AuthLayout;  return (  lt;Route  {...rest}  render={(props) =gt; (  lt;Layoutgt;  lt;Component {...props} /gt;  lt;/Layoutgt;  )}  /gt;  ); }  RouteWrapper.propTypes = {  isPrivate: PropTypes.bool,  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])  .isRequired, };  RouteWrapper.defaultProps = {  isPrivate: false, };   

в index.js файл маршруты разных пользователей различаются в зависимости от типа пользователя в интерфейсе пользователя