Как предотвратить сеанс, основанный на роли в реакции?[Firebase]

Question

Я новичок в реагировании и в настоящее время разрабатываю приложение,

ПРЕДПОСЫЛКИ:

В нем есть администратор, преподаватели, студенты, информационные панели и статическая целевая страница скнопки / admin / login, / faculty / login, / student / login.который открывает соответствующие информационные панели.

ПРОБЛЕМА:

Когда я вхожу с логином учащегося, я могу получить доступ ко всем информационным панелям и наоборот, у меня есть поле с именемроль внутри моих узлов Firebase,

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

ROUTES.js

const Routes = props => {
  return (
    <MainLayout>
      <Switch>
        <AdminPublicRoute
          {...props}
          exact
          restricted={true}
          path="/admin/login"
          component={AdminLogin}
        />
        <AdminPrivateRoute
          {...props}
          path="/admin/admindashboard"
          exact
          component={AdminDash}
        />
<FacultyPublicRoute
          {...props}
          exact
          restricted={true}
          path="/faculty/login"
          component={FacultyLogin}
        />
        <FacultyPrivateRoute
          {...props}
          path="/faculty/facultydashboard"
          exact
          component={FacultyDash}
        />
<StudentPublicRoute
          {...props}
          exact
          restricted={true}
          path="/student/login"
          component={StudentLogin}
        />
        <StudentPrivateRoute
          {...props}
          path="/student/studentdashboard"
          exact
          component={StudentDash}
        />
 </Switch>
    </MainLayout>

ADMINPRIVATEROUTE.js

 import React from "react";
    import { Route, Redirect } from "react-router-dom";

    const AdminPrivateRoutes = ({ user, component: Comp, ...rest }) => {
      return (
        <Route
          {...rest}
          component={props =>
            user ? <Comp {...props} user={user} /> : <Redirect to="/admin/login" />
          }
        />
      );
    };

    export default AdminPrivateRoutes;

ADMINPUBLICROUTE.js

import React from "react";
import { Route, Redirect } from "react-router-dom";

const AdminPublicRoutes = ({ user, component: Comp, ...rest }) => {
  return (
    <Route
      {...rest}
      component={props =>
        rest.restricted ? (
          user ? (
            <Redirect to="/admin/admindashboard" />
          ) : (
            <Comp {...props} user={user} />
          )
        ) : (
          <Comp {...props} user={user} />
        )
      }
    />
  );
};

export default AdminPublicRoutes;

FACULTYPRIVATEROUTE.js

 import React from "react";
    import { Route, Redirect } from "react-router-dom";

    const FacultyPrivateRoutes = ({ user, component: Comp, ...rest }) => {
      return (
        <Route
          {...rest}
          component={props =>
            user ? <Comp {...props} user={user} /> : <Redirect to="/faculty/login" />
          }
        />
      );
    };

    export default FacultyPrivateRoutes;

FACULTYPUBLICROUTE.js

import React from "react";
import { Route, Redirect } from "react-router-dom";

const FacultyPublicRoutes= ({ user, component: Comp, ...rest }) => {
  return (
    <Route
      {...rest}
      component={props =>
        rest.restricted ? (
          user ? (
            <Redirect to="/faculty/facultydashboard" />
          ) : (
            <Comp {...props} user={user} />
          )
        ) : (
          <Comp {...props} user={user} />
        )
      }
    />
  );
};

export default FacultyPublicRoutes;

Любые предложения, советы будут полезны, заранее спасибо.

Answer 1

Если вы используете React Router, вы можете условно отображать маршруты

<Switch>
  <FacultyPublicRoute {...props} />
  {isFaculty && <FacultyPrivateRoute {...props} />}
  <StudentPublicRoute {...props} />
  {isStudent && <StudentPrivateRoute {...props} />}
</Switch>