reactjs - React 路由器和身份验证上下文

Question

我有一个使用 firebase 来处理其身份验证的 React 应用程序。目前，我firebaseApp.auth().onAuthStateChanged(setCurrentUser);用来获取用户是否登录并将其传递到上下文中，以便我的其他组件访问它们。下面是我的 AuthContext 和 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>
    );
};

此 Auth Provider 用于封装我的路由器，以便所有路由都可以访问 Auth Context

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

但是，在我的 GroupDash 组件中，如果我直接尝试转到“.../groups/groupID”，则无法访问 AuthContext，但如果我history.push("/groups/${groupID}")从另一个具有 AuthContext 的页面使用，则可以访问它。因此，由于 currentUser 为空，我总是收到错误消息。上下文是否有任何理由不传入？我肯定登录了。

const {currentUser} = useContext(AuthContext);

useEffect(() =>{
    groupRef.get().then(snapshot =>{
        const groupData = snapshot.data()
        const uids = []
        groupData.groupMembers.forEach(member =>{
            uids.push(member.uid)
        })
        permitted.current = uids.includes(currentUser.uid)

    })
}, [currentUser.uid, groupRef])

标签： reactjsfirebasefirebase-authentication