javascript - 在 React 中刷新后保留 'loggedIn' 状态

Question

对这里的初学者以及一般的 SPA 使用react。我试图让我的登录状态在我的应用程序中保持不变，但当用户刷新页面时我会遇到困难。目前，我的登录表单中有一个方法，可以调用服务器进行登录，并且我猜会收到一个 cookie(我正在使用带有 Flask-Login 扩展的 Flask)。所以我认为我在几个例子中看到的一个简单的事情就是存储 loggedIn我 parent 的状态<App>像这样的组件:

    constructor() {
        super();
        this.state = {
            loggedIn: false
        }
    }

    logIn = () => {
        this.setState({
            loggedIn: true
        });
    };

然后传递loggedIn状态和 logIn()回调到登录表单。这工作正常，但刷新后 loggedIn状态是false显然，再次。是用的方式来做吗？如果是这样，怎么办？

感谢您的帮助。

编辑:经过大量研究，我意识到 Flask-Login(显然)是服务器端 session 身份验证方案或其他方案。所以它发送的cookie是httpOnly ，所以我无法按照第一个答案中的建议使用 JS 访问它。有没有使用 httpOnly 的文档SPA 中的 session cookie？

Answer 1

您可以将登录状态存储在cookie中。使用 react-cookie npm package.

constructor() {
    super();
    this.state = {
        loggedIn: false
    }
}

componentWillMount() {
    var loggedIn = cookie.load('loggedIn');
    if(loggedIn !== undefined) {
        this.setState({loggedIn})
    } 
}
logIn = () => {
    this.setState({
        loggedIn: true
    });
    cookie.save('loggedIn', true);
};