如何防止基于角色的会话反应？ [火力基地]

Question

我是反应新手，目前正在开发应用程序，

背景：

它具有管理员、教师、学生、仪表板和一个静态登录页面，其中包含指向 /admin/login 、/faculty/login 、/student/login 的按钮。这会打开相应的仪表板。

问题：

当我使用学生的登录名登录时，我可以访问所有仪表板，反之亦然，我的 firebase 节点中有一个名为 role 的字段，

登录时我检查用户的角色，它不允许具有其他角色的其他用户登录，但是一旦我登录后，我就可以访问所有仪表板（这不应该发生），包括我应该访问的仪表板open ，我正在使用 react 和 routes.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>