0

estoy intentando hacer un componente privado, para que no se pueda ir a la página /proyectos en caso de que el usuario no está logeado, pero no lo consigo. Creo que dado que el usuario de firebase llega de manera asincrona, pero no consigo arreglarlo. De momento mi código es:

import React, { useContext, useEffect, useRef, useState } from "react";
import { Route, Navigate, useNavigate } from "react-router-dom";
import AuthContext from "../../context/auth/authContext";
import FirebaseContext from "../../firebase/context";
import firebase from "../../firebase";

const RutaPrivada = ({
  component: Component,
  path,
  redirect,
  value,
  ...props
}) => {
  const authContext = useContext(AuthContext);
  const { unsuscribe, usuario, autenticado } = authContext;

  // useEffect(() => {
  //   unsuscribe();
  // }, []);

  console.log(usuario);

  // setTimeout(() => {
  //   if (!value) {
  //     return <Navigate to="/" />;
  //   }
  // });
  if (!usuario) {
    return <Navigate to="/" />;
  }

  return <Route {...props} render={(props) => <Component {...props} />} />;
};


//   if (!usuario) {
//     return <Navigate to="/" />;
//   }

export default RutaPrivada;

De momento consigo que no se pueda entrar a proyectos si el usuario no está logueado, pero si recargo la pagina pierdo la conexión y me vuelve al login.

Alguien podría ayudarme?? Gracias

1
  • Yo lo que hago es que al iniciar sesión guardo el autentificador (generalmente un JWT token) en la memoria local del usuario y cuando la página inicia reviso si el token está y si ha expirado, si todo está bien lo redirijo a la página principal; de no ser así lo redirijo al login.
    – FranAcuna
    Commented el 8 oct. 2020 a las 21:21

1 respuesta 1

0

Lo solucioné poniendo un token en localstorage. para el que le pase lo mismo. Me imagino que habrá soluciones más sofisticadas, pero al menos eso funciona.

Saludos

Tu Respuesta

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

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