如何登录并让用户在ReactJS上注销，如何让用户保持连接状态

Question

我在使用reactJs的代码中遇到了问题。当我使用电子邮件和密码登录时，它成功连接并将我重定向到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来保存我从登录服务获得的令牌，这样我就可以在整个页面中继续导航。

令牌会在一段时间后过期，所以每次访问该站点时，我都会检查服务器是否我的令牌已过期，如果它没有过期，我可以立即访问该站点，如果它已过期，我将需要登录再次。

您遇到了这个问题，因为您将用户的状态保存为反应状态，反应状态将不会在页面刷新时保留，甚至在不同的兄弟组件上，因此您需要继续登录才能访问该站点。

好吧，至少将身份验证状态保存到cookies / sessionstorage，有反应库和互联网上的许多示例来执行此操作。你最好还是阅读这些内容，因为它们已经详细解释过，不适合这个答案。

========编辑

对于基于Cookie的身份验证，您可以使用包js-cookie包。成功登录后保存Cookie，如（非常粗略的例子）：

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

然后你可以通过以下方式获得值：

Cookies.get('is_authenticated');

然后你可以做一个简单的检查is_authenticated的值是否是true的字符串。如果是，您仍然可以访问该页面。

您可以在主页面上调用此方法，例如componentDidMount，因此每次都会检查它。

如果您注销该页面，只需删除该值，例如：

Cookies.remove('is_authenticated');

所以当你打电话

Cookies.get('is_authenticated');

该值将是undefined所以您需要登录才能访问该应用程序。

请注意，这是一个粗略的例子。如果您从服务器登录，该服务器应该为您提供某种令牌，并将该令牌保存在浏览器cookie上。