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

Posted 2023-02-22

【中文标题】即使我在 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

【发布时间】：2019-07-06 02:52:25

【问题描述】：

我正在尝试使用 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 路由，并且应该使用保存的数据自动登录还原。但是当我刷新页面时，数据会丢失并且 IT STAYS IN /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);

这里是动作创建者/并且reducer已经被我创建了：

export const authSignIn = () => async (dispatch) => 
    const success = await auth.signInWithEmailAndPassword("[e-mail]", "12345678").catch((error) =>  console.error(error));
    success.user.uid !== undefined ?
        dispatch(authSuccess(success.user.displayName)) : 
        dispatch(authFailed("INVALID : FAILED TO LOG IN "));

;

请看一看。我被卡住了。

【参考方案1】：

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

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

以下问题也可能对您有所帮助。

How can I persist redux state tree on refresh?