刷新页面时，PrivateRoute 总是重定向到登录页面；如何等待 useEffect() 和 localStorage？

如何解决刷新页面时，PrivateRoute 总是重定向到登录页面；如何等待 useEffect() 和 localStorage？

我正在我的应用程序中实施安全性和用户管理，但遇到了 React 路由器、上下文、localStorage 的问题。

使用路由器，我创建了一条私有路由，并检查上下文或本地存储上是否存在用户 ID，如果用户 ID 不存在，则将用户重定向到登录页面。 这很好用，但是如果我刷新页面，它总是重定向到登录页面。即使用户已登录，并且应该存在于 localStorage 上。

我认为问题源于 localStorage 和“useEffect()”。 我的理论是路由器在 localStorage（和 useEffect）检查用户 ID 是否存在之前重定向。 不知道如何解决这个问题？

这是我的私有路由组件的代码"

if (!model.ListUserPerFloor.Values.Any(v => v.IdUser.Equals(user.id)))
{
...
}

^ " console.log("Inside Route: "+ UserID); " 打印 0，这就是为什么它总是重定向到登录页面的原因。这就是为什么我认为 useEffect()（如下所示的路由）可能与用户 ID 设置不正确有关。

路由部分代码：

import {
    Route,Redirect,RouteProps,} from 'react-router-dom';
import {MyContextProvider,useMyContext} from '../Context/UserContext';


interface PrivateRouteProps extends RouteProps {
    // tslint:disable-next-line:no-any
    component: any;
    UserID: number;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const { component: Component,UserID,...rest } = props;

    console.log("Inside Route: "+ UserID);

    return (
        <Route
            {...rest}
            render={(routeProps) =>
                UserID > 0 ? (
                    <Component {...routeProps} />
                ) : (
                        <Redirect
                            to={{
                                pathname: '/',state: { from: routeProps.location }
                            }}
                        />
                    )
            }
        />
    );
};

export default PrivateRoute;

解决方法

为了解决我想要完成的事情，我只是在 PrivateRoute 中直接添加了 localStorage 检索（而不是使用 useEffect 的 PrivateRoute 的父节点）

const PrivateRoute = (props: PrivateRouteProps) => {
const { component: Component,UserID,...rest } = props;

console.log("Inside Route: "+ UserID);

return (
    <Route
        {...rest}
        render={(routeProps) =>
            localStorage.getItem("UserID")  ? ( // if UserID == 0 when user is NOT logged in. So,if ID == 0,redirect to signinpage
                <Component {...routeProps} />
            ) : (
                    <Redirect
                        to={{
                            pathname: '/',state: { from: routeProps.location }
                        }}
                    />
                )
        }
    />
);

};