Question

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

背景：

它具有管理员，教职员工，学生，仪表板和一个静态登录页面，其中包含用于/ admin / login，/ faculty / login和/ student / login的按钮。打开相应的仪表板。

问题：

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

在登录时，我检查用户的角色，并且不允许其他角色的其他用户登录，但是登录后，我能够访问所有仪表板（不应发生），包括我应该配置的仪表板打开，我正在使用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>

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

1 个答案: