Перенаправить пользователя на защищенный маршрут, если пользователь уже вошел в систему, что приводит к повторной визуализации страницы входа и отображению в течение некоторого времени перед перенаправлением

Question

У меня есть приложение activ + firebase, которое имеет защищенные маршруты. Я сталкиваюсь с проблемой, если вошедший в систему пользователь заходит на страницу входа. Проблема в том, что страница входа в систему отображается на секунду, а затем перенаправляется на домашнюю страницу, т.е. защищенный маршрут. Я чувствую, что проблема в том, что значение, полученное из контекста на странице входа в систему, чтобы проверить, аутентифицирован ли пользователь, обновляется после разрешения маршрута. Может кто-нибудь дать мне указание о том, как я должен это исправить. В идеале я бы не хотел, чтобы пользователь какое-то время видел страницу входа, если пользователь уже аутентифицирован.

//App.js
render() {
    return (
      <AuthProvider>
        <Router>
          <Switch>
            <PrivateRoute exact path="/" component={Home}></PrivateRoute>
            <Route exact path="/login" component={LoginPage}></Route>
            <Route exact path="/signup" component={SignUp}></Route>
          </Switch>
        </Router>
      </AuthProvider>

    );
  }
}

//AuthProvider
import React, { useEffect, useState } from "react"
import { fire } from "./Fire"

export const AuthContext = React.createContext();

//this component will maintain the current user throughout the app
export const AuthProvider = ({ children }) => {
    const [currentUser, setCurrentUser] = useState(null)

    //empty array as second arg to useEffect hook as we only want to trigger it once
    useEffect(() => {
        console.log("useEffect")
        fire.auth().onAuthStateChanged(setCurrentUser)
    }, [])

    return (
        <AuthContext.Provider value={{ currentUser }}>{children}</AuthContext.Provider>
    )
}

//PrivateRoute
const PrivateRoute = ({ component: RouteComponent, ...rest }) => {

    //useContext hook makes it very easy to retrieve the value
    const { currentUser } = useContext(AuthContext)
    return (
        <Route {...rest} render={
            routeProps => {
                console.log("currentUser" + currentUser);
                return !!currentUser ? (
                    <RouteComponent {...routeProps} />
                ) : (
                        <Redirect to={"/login"} />
                    )
            }

        } />
    )
}

//login
render() {
        if (this.props.context.currentUser)
            return <Redirect to="/" />
        return (
            <Login email={this.state.email} password={this.state.password} inputHandler={this.onInputChange} loginHandler={this.onLoginClick} />
        )
    }

Answer 1

Вам, вероятно, следует добавить проверку загрузки в ваш файл PrivateRoute, который просто покажет Loading... или загрузчик, если пользователь еще не загружен. Для этого вам нужно будет внести небольшие изменения в файл AuthProvider и PrivateRoute.

//PrivateRoute
const PrivateRoute = ({ component: RouteComponent, ...rest }) => {

    //useContext hook makes it very easy to retrieve the value
    const { currentUser } = useContext(AuthContext)
    return (
        <Route {...rest} render={
            routeProps => {
                console.log("currentUser" + currentUser);
                return !!currentUser ? (
                    <RouteComponent {...routeProps} />
                ) : currentUser === 'loading' ? <h1>Loading...</h1>
                  :(
                        <Redirect to={"/login"} />
                    )
            }

        } />
    )
}