在React中刷新后保持'loggedIn'状态

Question

反应这里的初学者和一般的SPA。我试图让我的登录状态在我的应用程序中保持不变，但我在用户刷新页面时遇到困难。目前我的登录表单中有一个调用服务器登录的方法，我猜想接收到一个cookie（我使用Flask-Flask-Login扩展名）。所以我想这是我在一对夫妇的例子已经看到了一个简单的事情是把loggedIn状态保存在我父母<App>成分是这样的：

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

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

，然后再通过loggedIn状态和logIn()回调到登录形成。这工作正常，但显然，刷新后loggedIn状态是false。正在使用的方式来做到这一点？如果是这样，怎么样？

感谢您的帮助。

编辑：经过一堆研究后，我意识到Flask-Login（显然）是一个服务器端会话认证方案或任何其他。所以它发送的cookie是httpOnly，所以我无法像第一个答案中推荐的那样使用JS来访问它。是否有任何文档使用httpOnly会话cookie在SPA？

Answer 1

您可以将loggedIn状态存储在cookie中。使用react-cookienpm 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); 
};