即使我在 react/redux 中设置了受保护路由的身份验证，我仍然会注销？当我刷新页面

Question

我正在尝试使用 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>

这是自定义路线：


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 }}} />}
            />
        );
    }
};

我有 3 条路线，/loginapp、/dashboard、/leaderboard，其中，我希望用户在刷新页面时不应该再次查看 /loginapp 路线，并且应该使用数据自动登录保存在 redux 中。但是，当我刷新页面时，数据丢失并且 它停留在 /LOGINAPP 路由中，我必须手动登录。

这是我的登录应用程序代码：

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

这里是 action creator / reducer 已经由我创建：

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 "));

};

请看。我被卡住了。

Answer 1

i wanted the user shouldn't view /loginapp route again if the user refreshes the page and automatically should be logged in with the data saved in redux . But when i refresh the page the data gets lost and IT STAYS IN /LOGINAPP route AND I HAVE TO MANUALLY LOGIN.

这是预期的行为。 Redux 不是一个持久化的数据存储，当你重新加载页面时，一切都会消失。要在重新加载期间保持身份验证状态，您需要根据需要将状态保存在 sessionStorage or localStorage 中。

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

即使我在 react/redux 中设置了受保护路由的身份验证，我仍然会注销？当我刷新页面

i keep getting logged out even though i have set the authentication with protected routes in react/redux ? when i refresh the page

javascript

reactjs

react-router

redux

react-router-dom