在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); 
};