1

Problema : He creado un login con nodejs y usando una API rest de django, estoy intentando guardar el nick de usuario en una variable global para así que me sea más fácil usarla en alguna otra funcionalidad, la cosa es que creando la variable global usuarioLogeado cada vez que cambio de componente se pierde esta y su valor vuelve a null, es decir solo se mantiene como el valor del formulario del login en la componente de login.js cuando cambio a otra se vuelve a null

Parte de código del Login.js

global.usuarioLogeado = require('./user');

async function loginUser(credenciales) {
  const url =
    "http://localhost:8000/api/Usuarios/?search=" + credenciales.usuario;
  var response = await axios.get(url);
  var data = response.data;

  if (data.length > 0) {
    data.forEach((element) => {
      if (element.nombre === credenciales.usuario) {
        if (element.password === credenciales.password) {
          global.usuarioLogeado = credenciales.usuario;
          console.log(global.usuarioLogeado)
          window.location.replace("/");
        }
      }
    });
  }
}

User.js

var usuarioLogeado = null;

module.exports = usuarioLogeado;

App.js

function App() {
  console.log(global.usuarioLogeado);
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/Login" exact component={Login} />
          <Route path="/Register" exact component={Register} />
          <Route path="/Noticias" exact component={Noticias} />
          <Route path="/Estadisticas" exact component={Estadisticas} />
          <Route path="/CompraVenta" exact component={CompraVenta} />
          <Route path="/Plantilla" exact component={Plantilla} />
        </Switch>
      </div>
    </Router>
  );
}
1
  • 1
    Necesitas manejar el estado con un hook, específicamente setState, de lo contrario React no va a poder relacionar tu variable global con el ciclo de vida del componente. Y por lo tanto los cambios a dicha variable son "invisibles" para React.
    – FranAcuna
    el 25 jun. 2021 a las 16:24

2 respuestas 2

1

Parece que lo que buscas es mantener una variable global en el Front end.

Una posible solución es usando React Context

El siguiente ejemplo es mínimo, pero suficiente para observar el comportamiento de React context y puedas continuar con el diseño de tu sistema login.

Correlo en página completa, hay unos warnings que ocultan el botón de login:

const Router = window.ReactRouterDOM.HashRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;
const Switch =  window.ReactRouterDOM.Switch;

/*
Se crean los contextos
*/
const userContext = React.createContext(null);
const setUserContext = React.createContext(null);


function App(){
  //Se crea un estado al inicio de la app
  const [user, setUser] = React.useState({});
  
  return(
    <div>
        <Router>
            {/*Se envuelven las rutas en los contextos
        y se pasan los valores del estado user*/}
           <userContext.Provider value={user}>
           <setUserContext.Provider value={setUser}>
        
               <Link to="/home">- Home - </Link>
               <Link to="/Login">Login - </Link>
               <Link to="/Register">Register - </Link>
               <Link to="/Noticias">Noticias -</Link>

          <Switch>
        
              <Route path="/" exact component={Home} />
              <Route path="/home" exact component={Home} />
              <Route path="/Login" exact component={Login} />
              <Route path="/Register" exact component={Register} />
              <Route path="/Noticias" exact component={Noticias} />
          </Switch>
          </setUserContext.Provider>
          </userContext.Provider>
       </Router>
    </div>
  );
};

function Home(){
  //podemos acceder al contexto en cualquier componente hijo
  //y profundidad n
  const userInfo = React.useContext(userContext);
  
  const userIsLoged = <div>{(Object.keys(userInfo).length) ? userInfo.first +" "+ userInfo.last  : null}</div>;
  return (
      <div>{userIsLoged}
         <h3>Estas en Home</h3>
      </div>
  );
}

function Login(){
  //se usan los contextos user y setUser
  const userInfo = React.useContext(userContext);
  const setUserInfo = React.useContext(setUserContext);
  const userIsLoged = <div>{(Object.keys(userInfo).length) ? userInfo.first +" "+ userInfo.last  : null}</div>;
  
  function loginAPI(){
      fetch("https://randomuser.me/api/")
      .then((res) => res.json())
      .then((data) => {
          const user = data.results[0].name;
          setUserInfo(user);
       });
  }
  
  return (
      <div>{userIsLoged}
      <h3>Estas en Login</h3>
         <h3><button onClick={loginAPI}>Login!</button></h3>
      </div>
  );
}

function Register(){
    return <h3>Estas en register</h3>
}

function Noticias(){
  //podemos acceder al contexto en cualquier componente hijo
  //y profundidad n
  const userInfo = React.useContext(userContext);
  const userIsLoged = <div>{(Object.keys(userInfo).length) ? userInfo.first +" "+ userInfo.last  : null}</div>;
  return (
      <div>{userIsLoged}
         <h3>Estas en Noticias</h3>
      </div>
  );
}


ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
    
<div id="root"></div>

Notas de campo

¿Porque usar context, si puedo solo pasar la variable user y la función setUser como props?

Consideremos que el diseño puede necesitar nested components, con context se puede llamar a user y setUser en profundidad n, sin necesidad de pasarlos como props entre componentes (Props drilling).

El siguiente paso pude ser encapsular el contexto en un modulo por separado e importarlo el los componentes que lo necesiten.

Espero que esta respuesta sea de ayuda.

0

En react lo más correcto es usar un useContext . Pero con un customHook es suficiente. Solo que debes llamarlo que cada path para asegurarte si sigue "logueado" o no.

Como el response es asíncrono, el primer dato que recibe el componente es null. Sin un estado , ese valor se va a mantener aunque llegue luego el valor correcto. Así que usa un useState y luego cuando escale el programa pásalo a un customHook y si lo completas pásalo a un useContext.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.