2

Estoy usando React y tengo un componente TheNavbar.js que según su estado,(en concreto si el usuario está logueado o no), muestra un html u otro.

Después de que el usuario se loguea o se sale de la app, automáticamente se redirige al usuario o bien a su página principal, o bien a la home. El problema es que cuando se le redirige, aunque ya está logueado, (o ha salido de la app), el html renderizado de la TheNavbar.js sigue siendo el mismo. No es hasta que se refresca la página (F5), que entonces el html renderizado si cambia.

Este es el código, en componentDidMount() lo que se realiza es comprobar si el usuario está logueado o no, y entonces se actualiza el estado. Después el rederizado html condicional depende de si este estado está en true o false

export default class TheNavbar extends Component {

    state = {
        session: false
    }

    async componentDidMount(){
        
        const session = await Auth.currentSession();
        if(session){
            this.setState({
                session: true
            })
        }
    }

    handleLogOut = (event) => {
        
        event.preventDefault()
        try{
            Auth.signOut()
            this.props.authentication.setAuthStatus(false)
            this.props.authentication.setUser(null)
        } catch (err) {
          console.log(err);
        }
        setTimeout(() =>  this.props.history.push('/'), 300);
    }
    render() {
        if(!this.state.session){
            return (
                <div>
                    <Navbar className="navbar-cont" collapseOnSelect expand="lg" bg="primary" variant="dark">
                        <Navbar.Brand className="logo" href="/">Mapit</Navbar.Brand>
                        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                        <Navbar.Collapse id="responsive-navbar-nav">
                            <Nav className="mr-auto">
                                <Nav.Link href="about">Funcionalidades</Nav.Link>
                                <Nav.Link href="#pricing">Precios</Nav.Link>
                                <NavDropdown title="Mas" id="collasible-nav-dropdown">
                                    <NavDropdown.Item href="/contact">Contacto</NavDropdown.Item>
                                    <NavDropdown.Item href="/profile">Sobre el autor</NavDropdown.Item>
                                </NavDropdown>
                            </Nav>
                            <Nav>
                                <Button className="login-btn" variant="warning" href="/login">Login</Button>
                                <Button className="register-btn" variant="light" href="/register">Register</Button>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
            )
        } else {
            return (
                
                <div>
                    
                   <Navbar className="navbar-cont" collapseOnSelect expand="lg" bg="primary" variant="dark">
                        <Navbar.Brand className="logo" href="/news">Mapit</Navbar.Brand>
                        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                        <Navbar.Collapse id="responsive-navbar-nav">
                            <Nav className="mr-auto">
                           
                                <Nav.Link href="/addsite">Sitios</Nav.Link>
                                <Nav.Link href="/usergallery">Mi Galeria</Nav.Link>
                                <NavDropdown title="Mas" id="collasible-nav-dropdown">
                                    <NavDropdown.Item href="/contact">Contacto</NavDropdown.Item>
                                    <NavDropdown.Item href="/profile">Sobre el autor</NavDropdown.Item>
                                </NavDropdown>
                            </Nav>
                            <Nav>
                                <Button className="login-btn" variant="warning">Mi cuenta</Button>
                                <Button onClick={this.handleLogOut} className="register-btn" variant="light">Salir</Button>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
            )
        }
        
    }
}

1 respuesta 1

2

en el método de handleLogOut deberias cambiar el session to false porque session vive en TheNavbar

Auth.signOut()
this.props.authentication.setAuthStatus(false)
this.props.authentication.setUser(null)
this.setState({ session: false })
3
  • Genial, era eso efectivamente para el logout. En el caso de la función de login, que se hace en el componente Login.js, debería enviarle las props de authentication al estado de la Navbar, no? Commented el 13 abr. 2020 a las 18:14
  • Javier lo mismo te interesa tener ese estado llamémosle global, accesible a toda la aplicación, por lo que tenerlo encapsulado dentro del componente TheNavbar puede no cumplir todas tus expectativas. Si estás usando Redux, puedes guardar la variable en un reducer, o bien, tener ese estado en un componente "padre" de cual partan el resto y puedan consumirla via props o contexto. Commented el 13 abr. 2020 a las 18:52
  • Vale, gracias! @AdolfoOnrubia Commented el 13 abr. 2020 a las 22:10

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.