如何保护Reactjs中的组件?

ulydmbyx  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(107)

请记住,我是ReactJs的新手,在过去的几个月里一直在学习。所以我正在学习,请耐心等待。
我已经创建了两个React组件LoginSecureLogin承载了FacebookLogin组件,该组件位于此包中:https://www.npmjs.com/package/@greatsumini/react-facebook-login,而且我在按下按钮时通过登录尝试从Facebook得到成功的响应。这应该是在成功时导航到Secure页面。

    • 问题**是我只能直接导航到URL中的Secure组件(我为此使用react-router-dom包),但我希望任何导航到安全页面的尝试都被重定向到Login页面。

我该怎么做呢?
谢谢你。

6vl6ewon

6vl6ewon1#

根据that component's documentation,您可以在代码中获得登录状态:

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

这里的想法是将组件默认为某种“加载状态”,并且仅在验证通过之后才呈现“安全”内容。

相关问题