Skip to main content
Formato código
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

hoy meMe encuentro realizando una aplicación en React Js por lo cual me vi en la obligación de tener un context para almacenar la información luego de un inicio de sesión, para así proteger rutas y/o enviar datos de peticiones posteriores dentro del sistema, pero no logro trabajar de forma correcta con el useContext, si alguien pudiera explicarme o darme una mano, hasta el momento tengo un archivo provider en donde declaré mi context

    import {createContext} from 'react';
export const userContext = createContext([]);

luegoLuego donde hago el login tengo mis siguiente funciones :

const [usuario, setUsuario] =  useContext(userContext);

const autenticar = async (e) => {
    e.preventDefault();
  
   try {
    const autentificacion = await axios.post('http://localhost:8001/auth', {
          user: login.user,
          password: login.password           
    });

  

    setUsuario( autentificacion.data.token, );

    localStorage.setItem('token', autentificacion.data.token);



   } catch (e) {
    console.log("error::"+e)   
   }
 
}  

Hasta aquí todo bien , pero cuando quiero entrar a otra ruta que no sea / (que es donde se hace la petición del login y paso a otra ruta que es /crear-secreto )

al querer consumir mi contexto, este se pierde, mi app.js está así

function App() {

const providerValue = useMemo(() => ({usuario, setUsuario}, [usuario, setUsuario])) return (

function App() {
   
  const providerValue = useMemo(() => ({usuario, setUsuario}, [usuario, setUsuario]))
  return (

    <Router > 
        <Navbar/>
        <userContext.Provider value={providerValue}>
        <Routes>      
            <Route exact path="/" element={<LoginPage/>}/>
            <Route  element= {<PrivateRoute/>} >
              <Route exact path="/crear-secreto" element={  <CrearSecreto/>}/> 
            </Route>  
        </Routes>
        </userContext.Provider>
  
    </Router>

  );
}

); }

estoy Estoy utilizado react-router-dom v6

hoy me encuentro realizando una aplicación en React Js por lo cual me vi en la obligación de tener un context para almacenar la información luego de un inicio de sesión, para así proteger rutas y/o enviar datos de peticiones posteriores dentro del sistema, pero no logro trabajar de forma correcta con el useContext, si alguien pudiera explicarme o darme una mano, hasta el momento tengo un archivo provider en donde declaré mi context

    import {createContext} from 'react';
export const userContext = createContext([]);

luego donde hago el login tengo mis siguiente funciones :

const [usuario, setUsuario] =  useContext(userContext);

const autenticar = async (e) => {
    e.preventDefault();
  
   try {
    const autentificacion = await axios.post('http://localhost:8001/auth', {
          user: login.user,
          password: login.password           
    });

  

    setUsuario( autentificacion.data.token, );

    localStorage.setItem('token', autentificacion.data.token);



   } catch (e) {
    console.log("error::"+e)   
   }
 
}  

Hasta aquí todo bien , pero cuando quiero entrar a otra ruta que no sea / (que es donde se hace la petición del login y paso a otra ruta que es /crear-secreto )

al querer consumir mi contexto, este se pierde, mi app.js está así

function App() {

const providerValue = useMemo(() => ({usuario, setUsuario}, [usuario, setUsuario])) return (

<Router > 
    <Navbar/>
    <userContext.Provider value={providerValue}>
    <Routes>      
        <Route exact path="/" element={<LoginPage/>}/>
        <Route  element= {<PrivateRoute/>} >
          <Route exact path="/crear-secreto" element={  <CrearSecreto/>}/> 
        </Route>  
    </Routes>
    </userContext.Provider>

</Router>

); }

estoy utilizado react-router-dom v6

Me encuentro realizando una aplicación en React Js por lo cual me vi en la obligación de tener un context para almacenar la información luego de un inicio de sesión, para así proteger rutas y/o enviar datos de peticiones posteriores dentro del sistema, pero no logro trabajar de forma correcta con el useContext, si alguien pudiera explicarme o darme una mano, hasta el momento tengo un archivo provider en donde declaré mi context

import {createContext} from 'react';
export const userContext = createContext([]);

Luego donde hago el login tengo mis siguiente funciones :

const [usuario, setUsuario] =  useContext(userContext);

const autenticar = async (e) => {
    e.preventDefault();
  
   try {
    const autentificacion = await axios.post('http://localhost:8001/auth', {
          user: login.user,
          password: login.password           
    });

  

    setUsuario( autentificacion.data.token, );

    localStorage.setItem('token', autentificacion.data.token);



   } catch (e) {
    console.log("error::"+e)   
   }
 
}  

Hasta aquí todo bien , pero cuando quiero entrar a otra ruta que no sea / (que es donde se hace la petición del login y paso a otra ruta que es /crear-secreto )

al querer consumir mi contexto, este se pierde, mi app.js está así

function App() {
   
  const providerValue = useMemo(() => ({usuario, setUsuario}, [usuario, setUsuario]))
  return (

    <Router > 
        <Navbar/>
        <userContext.Provider value={providerValue}>
        <Routes>      
            <Route exact path="/" element={<LoginPage/>}/>
            <Route  element= {<PrivateRoute/>} >
              <Route exact path="/crear-secreto" element={  <CrearSecreto/>}/> 
            </Route>  
        </Routes>
        </userContext.Provider>
  
    </Router>

  );
}

Estoy utilizado react-router-dom v6

Origen Enlace

¿Como utilizar useContext para guardar la información de un inicio de sesión?

hoy me encuentro realizando una aplicación en React Js por lo cual me vi en la obligación de tener un context para almacenar la información luego de un inicio de sesión, para así proteger rutas y/o enviar datos de peticiones posteriores dentro del sistema, pero no logro trabajar de forma correcta con el useContext, si alguien pudiera explicarme o darme una mano, hasta el momento tengo un archivo provider en donde declaré mi context

    import {createContext} from 'react';
export const userContext = createContext([]);

luego donde hago el login tengo mis siguiente funciones :

const [usuario, setUsuario] =  useContext(userContext);

const autenticar = async (e) => {
    e.preventDefault();
  
   try {
    const autentificacion = await axios.post('http://localhost:8001/auth', {
          user: login.user,
          password: login.password           
    });

  

    setUsuario( autentificacion.data.token, );

    localStorage.setItem('token', autentificacion.data.token);



   } catch (e) {
    console.log("error::"+e)   
   }
 
}  

Hasta aquí todo bien , pero cuando quiero entrar a otra ruta que no sea / (que es donde se hace la petición del login y paso a otra ruta que es /crear-secreto )

al querer consumir mi contexto, este se pierde, mi app.js está así

function App() {

const providerValue = useMemo(() => ({usuario, setUsuario}, [usuario, setUsuario])) return (

<Router > 
    <Navbar/>
    <userContext.Provider value={providerValue}>
    <Routes>      
        <Route exact path="/" element={<LoginPage/>}/>
        <Route  element= {<PrivateRoute/>} >
          <Route exact path="/crear-secreto" element={  <CrearSecreto/>}/> 
        </Route>  
    </Routes>
    </userContext.Provider>

</Router>

); }

estoy utilizado react-router-dom v6