React Router и контексты аутентификации - PullRequest
Новая
       5

React Router и контексты аутентификации

1 голос
/ 29 мая 2020

У меня есть приложение React, которое использует firebase для аутентификации. В настоящее время я использую 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 используется для инкапсуляции моего маршрутизатора, чтобы все маршруты имели доступ к контексту Auth 

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

Однако в моем Компонент GroupDa sh, я не могу получить доступ к AuthContext, если я напрямую попробую и go в «... / groups / groupID», но я могу получить к нему доступ, если использую 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])
...