Question

我有一个使用Firebase处理其身份验证的React App。目前，我使用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为null，所以我总是会收到错误消息。是否有任何原因导致上下文无法传递？我肯定已经登录了。

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])

React Router和身份验证上下文

0 个答案: