Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » ReactJS » Pantalla de login

ReactJS - Pantalla de login

Volver
Nuevo Tema
<<>>
 
Vista:

Pantalla de login

Publicado por Carlos (1 intervención) el 12/04/2021 18:58:12
Buenas tardes. Soy bastante nuevo en react, no tengo apenas idea de nada. He estado viendo tutoriales y algunos videos y aún no me ha salido lo que quería hacer.
Quiero hacer un programa básico con react donde me pida una pantalla de login que obtenga un token de postman y otra donde pueda visualizar lo que quiero que ese token saque. No consigo entenderlo bien. Entiendo que tengo que hacer 2 paginas donde en una pida el token y en la otra lo use, pero no veo como hacerlo, si me pudieséis echar una mano. Un saludo y gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de 7aamin
Val: 9
Ha mantenido su posición en ReactJS (en relación al último mes)
Gráfica de ReactJS

Pantalla de login

Publicado por 7aamin (26 intervenciones) el 09/10/2021 05:50:17
Hola, el login funciona de la siguiente manera:
1) Agregas tus credenciales y las envias al servidor
2) El servidor las valida con la informacion guardada en la base de datos
3) Si la informacion es correcta, el servidor genera un Token (por lo general con JWT Json Web Token) y le retorna a tu navegador
4) El navegador guarda el Token y cada vez que se haga una peticion, enviara el Token para informar que eres tu quien esta loggeado

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { useState } from "react";
import { Login } from "./Login";
import { MainPage } from "./MainPage";
 
const App = () => {
  return (
    <React.Fragment>
        <Login/>
        <MainPage/>
    </React.Fragment>
  );
}
 
export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { useState } from "react";
import axios from "axios";
 
export const Login = () => {
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
 
  const sendData = () => {
    axios.post('https://www.rutaatubackend.com/login', {data: {user: user, password: password}})
    .then(response => {
      if (response.data.token) {
        //Se almacena el token en el navegador
        localStorage.setItem('_token', token);
        //Ir a MainPage usando alguna libreria como react Router
      }
     }).catch(err => console.log(err));
  }
 
  return (
    <React.Fragment>
        <input type="email" placeholder="User" onChange={ event => setUser(event.target.value) }/>
        <input type="password" placeholder="Password" onChange={ event => setPassword(event.target.value) }/>
        <div onClick={ () => sendData() }></div>
    </React.Fragment>
  );
}

1
2
3
4
5
6
7
8
9
10
11
import React, { useState } from "react";
 
export const MainPage = () => {
  return (
    <React.Fragment>
        <p>This is the Main Page</p>
    </React.Fragment>
  );
}
 
Espero te sirva, si tienes dudas avisame..!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar