Tengo un problema con un efecto de uso dentro de un componente que está en cada componente. Realicé algunas autenticaciones y redireccionamientos en ese componente, pero pensé que cuando uso el enlace Nextjs o el botón de retroceso del navegador, el Layout useEffect no se vuelve a representar, lo que significa que no verifica si el usuario ha iniciado sesión, por ejemplo.

aquí está mi componente de diseño

 const Layout = ({ children }) => { const router = useRouter() const { setAuthenticated, userFromDB, setUserFromDB, setIsVender, isVender } = useContext(AuthContext) //cuando hacemos un login el token se guarda en el local storage asi que comprobamos que exista useEffect(() => { const checkToken = async () => { const token = localStorage.getItem('FBIdToken') if (token) { const decodedToken = jwtDecode(token); //si la fecha de expiracion del token supero a la actual, redirect al login if (decodedToken.exp * 1000 < Date.now()) { setAuthenticated(false) router.replace('/login'); } else { if(!userFromDB){ const user = await getUser(decodedToken.user_id); //si encontro un usuario, lo asignamos al context api if(user){ console.log(user) // obtenemos el objecto con los datos del usuario y seteamos en el context si es vendedor o no if(typeof user.isVender !== undefined){ user.isVender ? setIsVender(true) : setIsVender(false); } setUserFromDB(user); } setAuthenticated(true) } } console.log('ejecutando'); } else { if(router.pathname !== "/" && router.pathname !== "/download-app" && router.pathname !== "/register" && router.pathname !== "/login" ) { console.log(router.pathname, 'redirigiendo') router.replace('/login') } } } //comprobamos que haya un token y redirigimos al usuario en base a el checkToken(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isVender]) return ( <div> {children} </div> ) }

así es como lo importo dentro del componente _app.js

 return ( <AuthProvider> <Layout> <Component {...pageProps} /> </Layout> </AuthProvider> ) }

Espero que me puedan ayudar, gracias de antemano!