Question

我是React和Redux的新手，并且正在创建一个React应用，该应用需要根据用户角色（例如学生或老师）来确定路线。当前，我使用一个组件根据用户的状态有条件地创建路由：

// AppRouter.js

const AppRouter = () => (
      <Router history={history}>
        <div>
          <Header />
          <Switch>
            <Route path="/Login" component={LoginPage} exact={true} />
            <ProtectedRoutes />
          </Switch>
        </div>
      </Router>

//ProtectedRoutes.js

const ProtectedRoutes = (props) => {
  const isStudent = props.isStudent;
  const isTeacher = props.isTeacher;

  const studentRoutes = [
    <Route key={1} path="/StudentHub" component={StudentHubPage} />,
    <Route key={2} path="/Assignment" component={AssignmentPage} />
  ];
  const teacherRoutes = [
    <Route key={1} path="/TeacherHub" component={TeacherHubPage} />,
    <Route key={2} path="/CreateCourse" component={CreateCourse} />
  ];

  return (
    <div>
      {isStudent && studentRoutes}
      {isTeacher && teacherRoutes}
    </div>
  );
};


const mapStateToProps = (state) => ({
  isStudent: state.isStudent,
  isTeacher: state.isTeacher
});

export default connect(mapStateToProps)(ProtectedRoutes);

我的后端API实现了JWT进行身份验证。在登录过程中，我将根据登录后从API返回的信息在商店中设置isStudent和isTeacher标志。每次执行该API时，API都会从auth令牌中检查角色请求，因此后端没有问题。

我的问题是，这是存储和检查用户角色以及创建路由的正确且安全的方法吗？用户是否可以操纵或更改我的redux存储并更改这些值以创建未经授权的路由？

将授权标志存储在Redux存储中是否安全

0 个答案: