如何保护 ReactJS 中的组件？

Question

我创建了两个 React 组件 -

Login

和

Secure

。

Login

托管来自

此包

的 FacebookLogin 组件。

按下按钮后，它会提交登录尝试，我会从 Facebook 收到成功的响应。接下来，应用程序应导航到

Secure

页面，我使用

react-router-dom

包来完成此操作。

但是，我发现我可以直接导航到 URL 中的

Secure

组件。我怎样才能使任何导航到安全页面的尝试都首先重定向到

Login

页面？

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

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