Блог

Я пытаюсь создать приложение с полным стеком, используя React JS и Spring.

Я хочу добавить функцию входа/выхода из системы в свое приложение. Я успешно настроил функциональность входа в систему с помощью API-интерфейсов REST. Как только пользователь вошел в систему, я создаю переменную isuserlogg в хранилище сеансов и устанавливаю ее как true. Используя это, я также успешно реализовал защищенные маршруты (страница видна только при входе пользователя в систему, то есть isUserLogged === true).

Сейчас я пытаюсь реализовать функцию выхода из системы, но не могу этого сделать. Это моя функция заголовка, в которой я хочу изменить логин на выход, как только пользователь войдет в систему.

 class HeaderComponent extends Component {

    logoutCurrentUser = () => {
        window.sessionStorage.setItem("isUserLogged", false);
    };

    render() {

        if(window.sessionStorage.getItem("isUserLogged") !== "true") {
            return (
                <div>
                    <header>
                        <Navbar bg = "dark" variant = "dark">
                            <Nav className="mr-auto">
                                <div className="navbar-brand"> <a href ="/" style={{color: "inherit"}}> Billing Dashboard </a></div>
                            </Nav>
                            <Nav className = "navbar-right">
                                <Link to={'/admin-register'} className="nav-link"><FontAwesomeIcon icon = {faUserPlus}/> Register</Link>
                                <Link to={'/admin-login'} className="nav-link"><FontAwesomeIcon icon = {faSignInAlt}/> Login</Link>
                            </Nav>
                        </Navbar>
                    </header>
                </div>
            );
        } else {
            return (
                <div>
                    <header>
                        <Navbar bg = "dark" variant = "dark">
                            <Nav className="mr-auto">
                                <div className="navbar-brand"> <a href ="/" style={{color: "inherit"}}> Billing Dashboard </a></div>
                            </Nav>
                            <Nav className = "navbar-right">
                                <Link to={'/admin-login'} className="nav-link"><FontAwesomeIcon icon = {faSignOutAlt} onClick={this.logoutCurrentUser}/> Logout </Link>
                            </Nav>
                        </Navbar>
                    </header>
                </div>
            );
        }
    }
}

export default HeaderComponent;
 

Является ли это правильным способом сделать это?

Когда я комментирую функцию, появляется кнопка выхода из системы, но когда я не комментирую функцию logoutCurrentUser, меню входа в систему не меняется на выход из системы.

Я также требую, чтобы после выхода пользователя из системы ему снова были показаны параметры регистрации и входа (в заголовке).

Итак, вкратце:

-> >При входе в систему: Показать опцию выхода из системы в заголовке, при нажатии, переменная хранилища сеансов должна быть очищена, и в заголовке снова должна отображаться опция входа и регистрации.

-> >При выходе из системы: Показать опцию входа в систему в заголовке, при нажатии создается хранилище сеансов (уже сделано), а затем опция входа меняется на выход из системы (не работает)

Пожалуйста, дайте мне знать, где я ошибаюсь и что я должен сделать, чтобы исправить это.

Любая помощь будет высоко оценена, спасибо!