reactjs - React router 会短暂显示登录屏幕，然后在用户登录后重定向到仪表板

Question

我有一个登录页面、一个仪表板页面和其他一些页面。我正在使用 firebase 作为后端。我在登录组件上执行了条件渲染以检查用户是否登录。 (如果已登录，则会重定向到仪表板)。如果用户未登录，我已将 ProtectedRoutes 用于仪表板和其他重定向到登录页面。

发生的事情是，当我重新加载仪表板页面或任何其他页面时，我会短暂地看到登录组件，然后它会执行 firebase“auth.onAuthStateChanged”方法并设置登录状态为真并将我重定向回仪表板。我明白为什么我会短暂地看到登录页面，但我不知道如何解决这个问题。

import React, { useState } from 'react'
import { connect } from "react-redux"
import { signin, autoSignin } from "../Redux/Actions/AuthActions"
import { Redirect } from 'react-router-dom'

const Login = (props) => {

    const [form, setForm] = useState({})
    const [disable, setDisable] = useState(false)



    const handleChange = (e) => {
        setForm({
            ...form,
            [e.target.name]: e.target.value
        })
    }

    const handleSubmit = (e) => {
        setDisable(true)
        e.preventDefault()
        props.signin(form.email, form.password)
        setDisable(false)
    }


    return (
        props.auth.loggedin ?
            <Redirect to="/dashboard" /> :
            <div className="container-fluid login_screen">
                <div className="row justify-content-center">
                    <div className="col-md-4 col-xs-12">
                        <img className="img-fluid login_screen_logo mt-4" src="/images/logo.png" alt="logo" />
                        <h1 className="mt-4 fs-3 heading">LOGIN</h1>
                        <p className="fs-6 mb-3">to access dashboard</p>

                        <form onSubmit={handleSubmit}>
                            <div className="form-floating mb-4 mt-4">
                                <input name="email" onChange={handleChange} required type="email" className="form-control shadow-sm" id="floatingInput" placeholder="room@adil.tower" />
                                <label htmlFor="floatingInput">Email id</label>
                            </div>
                            <div className="form-floating mt-4">
                                <input name="password" onChange={handleChange} required type="password" className="form-control shadow-sm" id="floatingPassword" placeholder="Password" />
                                <label htmlFor="floatingPassword">Password</label>
                            </div>
                            <div className="d-grid gap-2">
                                <button type="submit" className={`btn btn-custom mt-4 btn-lg shadow ${disable ? "disabled" : ""}`}>LOGIN</button>
                            </div>
                        </form>


                    </div>
                </div>

            </div>
    )

}

const mapStateToProps = (state) => {
    return {
        auth: state.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        signin: (email, pass) => dispatch(signin(email, pass)),
        autoSignin: (uid) => dispatch(autoSignin(uid))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)

import React from 'react'


const Dashboard = (props) => {

    return (
        <h1>
        dashboard
        </h1>
    )
}


export default Dashboard

import React from 'react'
import { Redirect, Route } from "react-router-dom"

const ProtectedRoute = ({ loggedin, component: Component, ...rest }) => {
    return (
        <Route
            {...rest}
            render={
                (props) => {
                    if (loggedin) {
                        return <Component {...props} />
                    } else {
                        return <Redirect to="/" />
                    }
                }
            }
        />
    )
}

export default ProtectedRoute

import React, { useEffect } from 'react'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import ProtectedRoute from './ProtectedRoute'
import { auth } from "./FirebaseConfig"

// SCREENS
import Dashboard from './Dashboard/Dashboard'
import Login from "./Login/Login"
import Profile from './Profile/Profile'
import Emergency from './Emergency/Emergency'
import Notice from './Notice/Notice'
import Complains from "./Complains/Complains"
import Meetings from "./Meetings/Meetings"

// REDUX STORE & ACTIONS
import { connect } from "react-redux"
import { autoSignin } from "./Redux/Actions/AuthActions"


const App = (props) => {

    useEffect(
        () => {
            auth.onAuthStateChanged(user => {
                if (user) {
                    props.autoSignin(user.uid)
                }

            })
        }, []
    )

    return (
        <Router>
            <Switch>
                <ProtectedRoute loggedin={props.auth.loggedin} exact path="/dashboard" component={Dashboard}></ProtectedRoute>
                <Route exact path="/"><Login /></Route>
                <ProtectedRoute loggedin={props.auth.loggedin} exact path="/profile" component={Profile}></ProtectedRoute>
                <ProtectedRoute loggedin={props.auth.loggedin} exact path="/emergency" component={Emergency}></ProtectedRoute>
                <ProtectedRoute loggedin={props.auth.loggedin} exact path="/notices" component={Notice}></ProtectedRoute>
                <ProtectedRoute loggedin={props.auth.loggedin} exact path="/complains" component={Complains}><Complains /> </ProtectedRoute>
                <ProtectedRoute loggedin={props.auth.loggedin} exact path="/meetings" component={Meetings} ></ProtectedRoute>
            </Switch>
        </Router>
    )
}

const mapStateToProps = (state) => {
    return {
        auth: state.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        autoSignin: (uid) => dispatch(autoSignin(uid))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Answer 1

我不会编辑你的代码，只是解释一下基本原理:在呈现 protected 路线期间，您有 2 个选择:

要么等待身份验证解决(props.auth.loggedin 是真或假，但不是未定义的——假设这些值是您从 BE 收到的)。同时，显示加载屏幕。解决此问题后，您将显示您的页面，或者您重定向到登录。

第二个选项是继续并开始渲染私有(private)( protected )路由。用户将看不到任何私有(private)数据，因为这些数据来自后端，并且您的这些后端调用也受到后端身份验证的保护。这种方法将允许您直接开始渲染 protected 路由的内容，并在这样做时等待 props.auth.loggedin 从后端到达 - 在您的 App 组件中，设置 React.useEffect 监听 props.auth.loggedin .如果用户未通过身份验证，则将他重定向到登录页面。如果他是，则什么都不会改变(或者你也可以让你的状态管理知道这件事)。

我在我的代码中包含了我是如何做到这一点的，以激发您的灵感:

export const AppRoute: React.FC<RouteProps> = observer((props: RouteProps) => {
const { user } = useMst();
const { component, ...rest } = props;
if (!user.isAuthenticated) {
  return <Redirect to={"/login"} />;
}

const Component = component as any;

return (
  <Route
    {...rest}
    render={(props) => (
      <Layout>
        <Component {...props} />
      </Layout>
    )}
  />
);
});

然而，在这段代码中，我将有关用户是否已通过身份验证的信息存储在 Mobex 中，并监听 Mobex 状态变化 - 因此当 Mobex 意识到用户未通过身份验证时，它将触发该重定向语句的执行。