Login

Pasos:

  1. Tendremos una página con un componente Login que recogerá el nombre y el usuario de un formulario y se los mandará al servidor.
  2. El servidor le enviará de vuelta un token generado con jwt a partir de la id de ese usuario.
  3. Guardaremos ese token globalmente usando redux.
  4. Tendremos una segunda página en la que veremos la id del usuario logueado sólo si este ha logrado loguearse con éxito.
    const ContenidoRestringido = ({ accessToken }) => { 
        const [userData, setUserData] = useState(null);
    
        useEffect(() => {
            getJson('/user-data', '', { headers: { accessToken } }).then(setUserData);
        },[]);
    
        return (
            <div>
                <p>Contenido reestringido</p>
                {userData && (
                    <div>{userData.idRecuperadaDeLaBaseDeDatos}</div>
                )}
            </div>
        );
    }
    
    const mapStateToProps = state => {
        return{
            accessToken: selectToken(state),
        }
    }
    
    export default connect(mapStateToProps)(ContenidoRestringido);
Descargar cliente con context API Descargar cliente con redux Descargar servidor con nodejs
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.