tenemos una aplicación react.js que usa react-router v.6. Recibimos roles y permisos del back-end cuando el usuario inicia sesión, queremos alternar los elementos del menú y filtrar las rutas según el rol/permiso.

¿Cómo deben comunicarse el front-end y el back-end sobre el acceso a la ruta y los elementos del menú? mi solución para rutas privadas hasta ahora:

 import { Navigate } from 'react-router-dom'; import { userInfoStore } from './auth/login/user-store'; export function PrivateRoute({ children, roles }) { const info = userInfoStore((state) => state.info); if (!info.role) { return <Navigate to="/auth/login" />; } if (info.role && roles.indexOf(info.role) === -1) { return <Navigate to="/" />; } return children; }