Login en React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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);
← Login con Google
Observer Pattern →