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

Question

13 浏览2023年6月22日

匿名的 2023年6月22日

0 Comments

作为React初学者，对于单页面应用程序（SPA）也不太了解。我正在尝试在整个应用程序中使登录状态持久化，但是当用户刷新页面时遇到了困难。目前，在我的登录表单中有一个方法，调用服务器进行登录，并且我猜测会收到一个cookie（我正在使用Flask和Flask-Login扩展）。因此，我认为一个简单的方法是将loggedIn状态存储在父组件中，像这样：

    constructor() {
        super();
        this.state = {
            loggedIn: false
        }
    }
    logIn = () => {
        this.setState({
            loggedIn: true
        });
    };

然后将loggedIn状态和logIn()回调传递给登录表单。这个方法运行良好，但是刷新页面后，loggedIn状态显然又变为false。这种方法正确吗？如果是，如何解决这个问题？

谢谢您的帮助。

编辑：经过一番研究，我意识到Flask-Login显然是一种服务器端会话认证方案。因此，它发送的cookie是httpOnly的，所以无法像第一条回答中建议的那样使用JavaScript访问它。有没有关于在SPA中使用httpOnly会话cookie的文档？

0

2 答案

匿名的 · Answer 1 · 2023-06-29T05:46:43+00:00

在React中，当页面刷新时，要持久化'loggedIn'状态。为了解决这个问题，可以创建一个'/token'的端点，通过这个端点来获取httpOnly的token。在Express中使用cookie-parser读取cookie，并将其作为响应的json返回。代码如下：

// 获取httpOnly的token的端点
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;
}, []);

具体的实现细节可以参考[这篇文章](https://juliangaramendy.dev/blog/use-promise-subscription)。

匿名的 · Answer 2 · 2023-07-27T01:09:02+00:00

问题的出现的原因：使用react-cookie包来存储loggedIn状态，但是如果cookie是httpOnly的，react无法读取和修改它。

解决方法：使用react-cookie包的set方法可以设置httpOnly的cookie，但默认情况下为false，因此客户端可以读取和修改它。但是如果服务器发送的cookie是httpOnly的，无法通过react访问它。可以参考相关的stackoverflow链接来解决这个问题。

文章内容如下：

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

在React应用程序中，有时我们需要在刷新后保持登录状态。这可以通过将登录状态存储在cookie中来实现。下面我们将介绍如何使用react-cookie包来实现这一点。

首先，我们需要安装react-cookie包。可以通过npm安装它：

npm install react-cookie

安装完成后，我们可以在React组件中使用react-cookie包来处理cookie。首先，在constructor方法中初始化登录状态为false：

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

然后，在componentWillMount生命周期方法中，我们可以从cookie中加载之前保存的登录状态，并将其设置到组件的state中：

componentWillMount() {
    var loggedIn = cookie.load('loggedIn');
    if(loggedIn !== undefined) {
        this.setState({loggedIn})
    } 
}

接下来，我们可以定义一个logIn方法，当用户登录时调用该方法，将登录状态设置为true，并将登录状态保存到cookie中：

logIn = () => {
    this.setState({
        loggedIn: true
    });
    cookie.save('loggedIn', true);
};

现在，每当用户登录时，登录状态将更新，并且在刷新页面后仍然保持登录状态。

然而，如果cookie是httpOnly的，react无法读取和修改它。在这种情况下，我们需要创建一个新的cookie，而不是使用react-cookie包。这可能涉及到与服务器的会话管理，具体实现方式可能因服务器而异。可以参考stackoverflow上的相关问题来获取更多信息和解决方案。

在React中刷新后保持登录状态是一个常见的需求。通过使用react-cookie包，我们可以将登录状态存储在cookie中，并在刷新后恢复登录状态。然而，如果cookie是httpOnly的，react无法读取和修改它。在这种情况下，我们需要使用其他方法来处理这个问题。希望本文对你有所帮助！