0 votes

Problème de login avec React

Bonjour. Je débute en React et là j'ai un problème avec l'affichage du menu lorsqu'un utilisateur est connecté. Basiquement, ce que je fais, c'est que je vérifie à l'aide sessionStorage.getItem() si l'utilisateur est connecté, puis j'affiche le menu s'il est connecté. Sinon, je n'affiche qu'un link login. `class AuthenticationService {

registerSuccessfulLogin(username,password){
    console.log('registerSuccessfulLogin')
    sessionStorage.setItem('authenticatedUser', username);
}

logout(){
    console.log('Disconnected')
    sessionStorage.removeItem('authenticatedUser');
}

isUserLoggedIn(){
    let user=sessionStorage.getItem('authenticatedUser')
    if(user===null) return false
    return true
}

}}` Dans le code ci-dessus, c'est le bloc isUserLoggedIn() que j'utilise pour la vérification. Ensuite je fait appel à la fonction isUserLoggedIn() dans un un module header contenant mon menu:

export default class HeaderComponent extends Component{
render(){
    const isUserLogged= AuthenticationService.isUserLoggedIn();
    //console.log(isUserLogged);
    return(
        <header>
            <nav className="navbar navbar-expand-md navbar-dark bg-dark">
                <div><a href="http://www.dane.com" className="navbar-brand">FOR SELL</a></div>
                <ul className="navbar-nav">
                    {isUserLogged && <li><Link className="nav-link" to="/welcome" onClick={AuthenticationService.isUserLoggedIn}>Home</Link></li>}
                    {isUserLogged && <li><Link className="nav-link" to="todos" onClick={AuthenticationService.isUserLoggedIn}>Todos</Link></li>}
                </ul>
                <ul className="navbar-nav navbar-collapse justify-content-end">
                    {!isUserLogged && <li><Link className="nav-link" to="Login" onClick={AuthenticationService.isUserLoggedIn}>Login</Link></li>}
                    {isUserLogged && <li><Link className="nav-link" to="Logout" onClick={AuthenticationService.logout}>Logout</Link></li>}
                </ul>
            </nav>
        </header>
    )
}

} Et comme susmentionné, je fais appel à isUserLoggedIn(), je stocke sa valeur dans la variable isUserLogged, et si isUserLogged est true, j'affiche le menu "home, todos et loggout", sinon, je n'affiche que le menu loggin. Le problème c'est que, cela ne fonctionne que quand j'actualise la page web Est-ce que quelqu'un a une solution svp??

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X