如何在Reactjs中保护组件？

Question

我创建了两个React组件，Login和Secure。 Login托管在此包中找到的FacebookLogin组件：https://www.npmjs.com/package/@greatsumini/react-facebook-login，当按下按钮时，我通过登录尝试从Facebook获得成功响应。这应该在成功时导航到Secure页面。

问题是我可以直接在URL中导航到Secure组件（我使用react-router-dom包进行此操作），但我希望任何尝试导航到安全页面的尝试都将重定向到Login页面。

我该如何做？

- digitalix

---

这个回答解决了你的问题吗？在React中检查身份验证 - undefined

Answer 1

根据该组件的文档，你可以在代码中获取登录状态：

FacebookLoginClient.login((res) => {
  // "res" contains information about the current user's logged-in status
});

因此，在任何需要了解状态的组件中，只需引用该库：

import { FacebookLoginClient } from '@greatsumini/react-facebook-login';

使用FacebookLoginClient.login检查用户的登录状态。如果状态不符合您定义的条件，请重定向用户。(例如，当组件首次加载时，您可以在useEffect中检查此项，或者如果您对此非常担心，可以在每次渲染时检查。)

---

关于渲染目标组件的更多细节，由于useEffect发生在初始渲染之后，您可以依赖额外的状态来进行检查。例如，考虑以下结构：

const [canRender, setCanRender] = useState(false);

useEffect(() => {
  FacebookLoginClient.login((res) => {
    // check the status and call "setCanRender" accordingly
  });
}, []);

if (!canRender) return <>Checking authentication...</>;

// your existing return for the component goes here

这里的想法是将组件默认为一种“加载状态”，只有在验证身份后才呈现“安全”内容。

- David