Question

在我的react应用程序中，我尝试使用react-router-dom实现公共和私有路由。

我目前正在从firebase.auth().onAuthStateChanged()函数获取身份验证状态。

问题在于，由于firebase.auth().onAuthStateChanged()函数是异步的，因此首先使用authState中的false呈现JSX块，然后firebase.auth().onAuthStateChanged()将authState设置为true在返回JSX之后。

因此，身份验证是正确的，但我的react应用仍停留在登录页面上。

PublicRoute.js

const PublicRoute = ({ component: Component, restricted, ...rest }) => {

    let authState = false;

    getAuthState()
        .then(user => {
            if (user.uid) {
                authState = true;
            } else {
                authState = false;
        }
    })

    return (
        <Route { ...rest } render={ props => (
            authState && restricted
                ? <Redirect to="/" />
                : <Component { ...props } />
        ) } />
    )
};

export default PublicRoute;

getAuthState.js

export const getAuthState = () => {
    return new Promise((resolve, reject) => {
        const waitAuthStateChange = () => {
            let currentUser = firebase.auth().currentUser;

            if (currentUser === null) {
                firebase.auth().onAuthStateChanged(user => currentUser = user);
                setTimeout(waitAuthStateChange, 100);

            } else {
                resolve(currentUser);

            }
        }

        waitAuthStateChange();
    })
};

在firebase.auth().onAuthStateChanged()侦听器获取身份验证之后，我不知道如何重新渲染或重新返回JSX。

提前谢谢！

Answer 1

您将需要一个React state。

要使用它，可以将其与名为useState（）;的钩子一起使用。

示例

const [authState,setAuthState] = useState(false);

getAuthState()
        .then(user => {
            if (user.uid) {
                setAuthState(true);
            }
    })

您当前的authState是一个普通的javascript对象，因此React不会将其视为更改，因此不会重新呈现。

将其更改为React状态，然后在执行setAuthState()时，React将其用作更改的枢轴并再次呈现。

侧面注意：在React中，单独调用getAuthState（）并不是一个好习惯。以React的方式，应将其放在useEffect（）挂钩中。

useState的引用：https://reactjs.org/docs/hooks-state.html
useEffect参考：https://reactjs.org/docs/hooks-effect.html

Firebase身份验证和公共/专用路由-React

1 个答案: