在 React 中刷新后保持“loggedIn”状态

Question

在这里对初学者和一般的 SPA 做出反应。我试图让我的登录状态在我的应用程序中保持不变，但是当用户刷新页面时我很挣扎。目前我的登录表单中有一个调用服务器登录的方法，我猜想收到一个cookie（我正在使用带有Flask-Login扩展的Flask）。所以我认为我在几个例子中看到的一个简单的事情是将loggedIn 状态存储在我的父级<App> 组件中，如下所示：

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

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

然后将loggedIn 状态和logIn() 回调传递给登录表单。这很好用，但是在刷新loggedIn 之后，状态显然又是false。是用的方式来做的吗？如果有，怎么做？

感谢您的帮助。

编辑：经过大量研究后，我意识到 Flask-Login （显然）是一种服务器端会话身份验证方案或其他什么。所以它发送的cookie是httpOnly，所以我无法按照第一个答案中的建议使用JS访问它。是否有任何文档在 SPA 中使用 httpOnly 会话 cookie？

Answer 1

一种可能的解决方法：我创建了一个/token 端点。由于 cookie 是 httpOnly 并由 Express 读取（使用 cookie-parser），因此我可以将其作为响应 json 返回，如下所示。

// An endpoint to get the httpOnly token
// during React app page refresh.
app
    .get('/token', (req, res) => {
        const token = req.cookies.token;
        res.json({ token: token ? token : null });
    });

现在，在 React 中，我可以有一个 useEffect（在适当的情况下，我将它放在一个包装组件的提供程序中），如果发生页面刷新，它会调用上述端点。

useEffect(() => {
    let isSubscribed = true;
    axios.get('/api/token')
        .then((res) => (isSubscribed && res.data.token
            ? setState(token)
            : null))
        .catch((error) => (isSubscribed
            ? console.error(error)
            : null));
    return () => isSubscribed = false;
}, []);

另请参阅this article。

Answer 2

您可以将已登录状态存储在 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);
};