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

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

Answer 2

一个可能的解决方法：我创建了一个 /token 端点。由于 cookie 是 httpOnly 并由 Express 读取（使用 cookie 解析器），因此我可以将其作为响应 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。

在React

2 个答案: