Javascript 即使我在react/redux中设置了受保护路由的身份验证，我还是会不断注销？当我刷新页面时

我正在尝试使用react和redux创建受保护的路由，我已经在redux上执行了初始化auth（）的操作！ 这里有一条路线：

    <BrowserRouter baseName="/">
                        <Switch>
                            <PublicRoute  authenticated={this.props.isAuthenticated} exact path="/loginapp" component={LoginApp}  />
                            <PrivateRoute  authenticated={this.props.isAuthenticated} exact path="/dashboard" component={dashboardContainer} />
                            <PrivateRoute  authenticated={this.props.isAuthenticated} exact path="/leaderboard" component={leaderBoardContainer} />
                        </Switch>
                    </BrowserRouter>

请看一看。我被卡住了

我希望，如果用户刷新页面，则用户不应再次查看/登录路由，并且应使用保存在redux中的数据自动登录。但当我刷新页面时，数据会丢失，并停留在/LOGINAPP路径中，我必须手动登录

这是预期的行为。Redux不是持久数据存储，当您重新加载页面时，所有内容都将消失。要在重新加载过程中保持身份验证状态，需要根据需要保存状态

此外，以下问题可能对您有所帮助

export const PublicRoute = ({component: Component, authenticated, ...props}) => {
    const { from } = props.location.state || { from: { pathname: "/dashboard" } };
    return (
        <Route
            {...props}
            render={(props) => authenticated === true
                ? <Redirect to={from} />
                : <Component {...props} />}
        />
    );
};


class PrivateRoute extends React.Component  {
    render() {
        const { component: Component, authenticated, ...rest }  = this.props;
        const isLoggedIn = authenticated;

        return (
            <Route
                {...rest}
                render={props => isLoggedIn 
                    ? <Component {...props} />
                    : <Redirect to={{ pathname: "/loginapp", state: {from: props.location }}} />}
            />
        );
    }
};

import PropTypes from "prop-types";
import * as actions from "../store/actions";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import classes from "./LoginApp.scss";

class LoginApp extends Component {

    constructor(props) {
        super(props);
    }

    pushme =() => {
        console.log("==================");
        this.props.initAuth();
        this.props.authHandler();
    }


    loginFormHandler = () => (
        <div>
            <span>this is login page</span>
            <button type="button" onClick={this.pushme}>get login</button>
        </div>
    );

    render() {
        return (
            <div className={classes.LoginApp}>
                {this.loginFormHandler()}
            </div>
        );

    }
}

LoginApp.propTypes = {
    initAuth: PropTypes.func,
    authHandler: PropTypes.func,
    isAuthenticated: PropTypes.bool,
    location: PropTypes.object
};


const mapStateToProps = state => {
    return {
        isAuthenticated:  state.auth.isAuthenticated
    };
};

const mapDispatchToProps = dispatch => {
    return {
        initAuth: () => dispatch(actions.initAuth()),
        authHandler: () => dispatch(actions.authSignIn())
    };
};
export default connect(mapStateToProps,mapDispatchToProps)(LoginApp);

export const authSignIn = () => async (dispatch) => {
    const success = await auth.signInWithEmailAndPassword("iphonexs@apple.com", "12345678").catch((error) =>  console.error(error));
    success.user.uid !== undefined ?
        dispatch(authSuccess(success.user.displayName)) : 
        dispatch(authFailed("INVALID : FAILED TO LOG IN "));

};