基于用户角色的路由

Question

我在对前端使用React

我正在登录，路由中忘记了密码

根据用户类型，我需要添加一些路由

Ex

• 用户类型

  Student:
      Dashboard, Profile, View Attendance 
  Teacher :
      Dashboard, Profile, add Attendance, Student Profile 
  

登录后只有我知道用户类型。

如果我在渲染应用程序组件时加载了所有路由，则会加载不需要的路由。

因此，学生可以使用教师组件。这可能会导致问题。

如何摆脱这个问题

Answer 1

您可以使用react-authorization将组件包装在路径中，并仅允许具有特定角色的用户查看它。您还可以定义将显示给未授权用户的错误组件。这是一个示例（在TypeScript中）：

const AdministrationRoute: React.FC<AdministrationRouteProps> = props => {
    const accessDeniedError = <div className="ml-3 mr-3"><Alert
        color="danger">Access denied!</Alert></div>;
    return <IfGranted expected="ROLE_ADMIN" actual={props.user.roles} unauthorized={accessDeniedError}>
        <Users/>
    </IfGranted>;
};

然后像往常一样在路由中使用该组件：

<Route path={Routes.administration.path} component={AdministrationRoute}/>

免责声明：：我是react-authorization库的作者。