Tengo una aplicación React en la que el objeto de usuario se almacena como cookies en el componente de la aplicación. Este objeto de usuario tiene una propiedad AccountType que es un número entero, y 1 significa que el usuario es un estudiante y 2 significa que el usuario es un profesor.

Estoy usando react-router v5 para proteger el acceso a ciertas rutas, a menos que el usuario que inició sesión sea de AccountType 2 (maestro) con el siguiente componente RouteGuard:

 const RouteGuard = ({ component: Component, ...rest }) => { const user = JSON.parse(Cookies.get("loggedInUser")); return ( <Route {...rest} render={(props) => { return user.AccountType === 2 ? ( <Component /> ) : ( <Redirect to={{ pathname: "/403", state: { error: "You are not allowed to access this resource.", from: props.location.pathname, redirected: true, }, }} /> ); }} /> ); };

Y un ejemplo de cómo se usa este componente RouteGuard:

 <Switch> <RouteGuard path="/records" exact component={Records} /> </Switch>

Funciona bien, para casos normales, pero descubrí que puedo iniciar sesión como estudiante e ir a la consola del desarrollador y en la sección de cookies, puedo modificar las cookies y establecer manualmente AccountType en 2, evitando así la protección de ruta.

¿Cuál sería la forma correcta de evitar que los usuarios no autorizados manipulen las cookies y obtengan acceso a los puntos finales protegidos, desde el punto de vista del front-end?