Как я могу сделать так, чтобы пользователь оставался на связи после входа в систему и чтобы пользователь вышел из системы на ReactJS?

Question

У меня проблема с кодом входа в систему, который я делал на реагировать.Когда я вхожу, используя электронную почту и пароль, он успешно соединяется и перенаправляет меня на компонент app.js.Но после входа в систему, если я возвращаюсь на страницу входа, она все равно переходит на страницу входа и запрашивает учетные данные для входа, в то время как пользователь только что вошел в систему.

Как я могу обработать это в реакции, чтобыСтраница входа в систему будет отображаться пользователю только в том случае, если он щелкнет кнопку выхода после того, как он вошел в систему?

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

Заранее спасибо!

Пользовательский компонент

class User extends React.Component {

    render() {

        return (

            <div>
                <div className="float-left">
                    <button type="button" class="btn btn-outline-secondary">Log in</button>
                    <button type="button" class="btn btn-outline-dark">Sign in</button>
                </div>

            </div>
        );
    }
}

Answer 1

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

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

У вас возникла эта проблема, потому что вы сохраняете состояние пользователя как состояние реакции, состояние реакции не сохраняется при обновлении страницы и даже при использовании другого компонента-брата, поэтому вам нужно будет войти в систему для доступа к сайту.

Ну, по крайней мере, сохраните состояние аутентификации в cookie / sessionstorage, есть библиотеки для реакции и множество примеров в Интернете, чтобы сделать это. Вам лучше их прочитать, так как они уже объяснены в мельчайших подробностях, которые не вписываются в этот ответ.

======== edit

Для проверки подлинности на основе файлов cookie можно использовать пакет js-cookie package. Сохраните файл cookie после успешного входа в систему, например (очень грубый пример):

Cookies.set('is_authenticated', 'true');

тогда вы можете получить значения:

Cookies.get('is_authenticated');

Затем вы можете просто проверить, является ли значение is_authenticated строкой true или нет. Если это так, вы все равно можете получить доступ к странице.

Вы можете вызвать этот метод на главной странице, например, componentDidMount, поэтому он будет проверяться каждый раз.

И если вы выйдете со страницы, просто удалите значение, например:

Cookies.remove('is_authenticated');

Итак, когда вы звоните

Cookies.get('is_authenticated');

значение будет undefined, поэтому вам необходимо войти в систему для доступа к приложению.

Пожалуйста, обратите внимание, что это грубый пример. Если вы входите с сервера, этот сервер должен предоставить вам какой-то токен, и вы вместо этого сохраните этот токен в файлах cookie браузера.