React Authentication Context 最初为 null

IT技术 reactjs firebase firebase-authentication react-router react-context
2021-05-26 07:58:02

我正在使用 React 上下文来保存我的应用程序的身份验证状态。目前,我遇到了一个问题,每当我尝试点击 时/groups/:id,它总是/login首先将我重定向/UserDash. 发生这种情况是因为我的 AuthProvider 的上下文更新得不够快,而我的私有路由利用 AuthContext 来决定是否重定向。

<AuthProvider>
    <Router>
        <Switch>
            <LoggedRoute exact path = "/" component = {Home}/>
            <Route exact path = "/login" component = {Login}/>
            <PrivateRoute exact path = "/groups/:id" component = {GroupDash}/>
            <PrivateRoute exact path = "/UserDash" component = {UserDash}/>
        </Switch>
    </Router>
</AuthProvider>

在另一个文件中:

export const AuthContext = React.createContext();

export const AuthProvider = ({children}) => {
  const [currentUser, setCurrentUser] = useState(null);
  useEffect(() => {
      firebaseApp.auth().onAuthStateChanged(setCurrentUser);
  },[]);
    return (
        <AuthContext.Provider
            value = {{currentUser}}
        >
            {children}
        </AuthContext.Provider>
    );

我的私人路线:

const PrivateRoute = ({component: RouteComponent, ...rest}) => {
    const {currentUser} = useContext((context) => AuthContext);
    return (
        <Route
            {...rest}
            render={routeProps => (currentUser) ? (<RouteComponent{...routeProps}/>) : (<Redirect to={"/login"}/>)}
        />
    )
};

还有我的登录页面

 const {currentUser} = useContext(AuthContext);
    if (currentUser) {
        return <Redirect to = "/UserDash" />
    }
    return (
        <button onClick={(e) => {googleLogin(history)}}>Log In</button>
    );

在私有路由将用户重定向到登录页面之前,是否有任何方法可以强制加载上下文?我试过在我的 PrivateRoute 中使用 firebase.auth().currentUser ,但这也失败了,我仍然被重定向到"/login",然后被推送到"/UserDash"

1个回答

由于 useEffect 在渲染之后运行并且在 useEffect 中获取的值来自异步调用,因此可以做的是实际维护加载状态直到数据可用

export const AuthContext = React.createContext();

export const AuthProvider = ({children}) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
      firebaseApp.auth().onAuthStateChanged((user) => {
          setCurrentUser(); setIsLoading(false)
      });
  },[]);
    return (
        <AuthContext.Provider
            value = {{currentUser, isLoading}}
        >
            {children}
        </AuthContext.Provider>
    );
  }

然后在privateRoute

const PrivateRoute = ({component: RouteComponent, ...rest}) => {
    const {currentUser, isLoading} = useContext((context) => AuthContext);
    if(isLoading) return <div>Loading...</div>
    return (
        <Route
            {...rest}
            render={routeProps => (currentUser) ? (<RouteComponent{...routeProps}/>) : (<Redirect to={"/login"}/>)}
        />
    )
};