在自定义路线之前更新商店

Question

我正在设计带有节点服务器的反应应用程序。我创建了一条自定义私人路线

import React from 'react';
import {connect} from 'react-redux';
import {Route, Redirect} from 'react-router-dom';

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

        return (
            <Route {...rest} component={(props) => {
                if(isAuthenticated){
                    return <Component {...props}/>
                }
                else{
                    return <Redirect to="/login" />
                }
            }}/>
        )
    }
}

const mapStateToProps = (state) => {
    return{
        isAuthenticated: state.auth.email !== '' ? true : false
    }
}

const ConnectedPrivateRoute = connect(mapStateToProps)(PrivateRoute)
export default ConnectedPrivateRoute;

我在登录后将自己从节点服务器重定向到仪表板路由。

import React from 'react';
import axios from 'axios';
import {connect} from 'react-redux';
import { setAuthenticatedUser } from '../actions/authA';

class Dashboard extends React.Component{
  constructor(props) {
    super(props);
    axios.get('/cookie').then((user) => {
      if(user.data.email)
        this.props.dispatch(setAuthenticatedUser(user.data));
    })
    .catch((e) => {
      console.log("Got some error");
    })
  }
  render() {
    return (
      <div>Dashboard Page</div>
    );
  }
}

export default connect()(Dashboard);

目前，我的仪表板会查找有关身份验证的 cookie 并更新我的商店。但是在添加 custom route 后，会重定向到 login page，这是因为我的自定义路由找不到更新的 store，因为它已在仪表板中更新。我被困在这里。我尝试在我的自定义路线中进行更新，但我给自己增加了更多的困惑。任何建议和解决方案都表示赞赏。

谢谢

Answer 1

如果您发布您的Login 组件，我可以更好地回答这个问题。

话虽如此，setAuthenticatedUser 不是仪表板组件的责任，因为如果他们能够导航到仪表板，则意味着他们已经通过身份验证。

用户登录后，您应该调用setAuthenticatedUser，然后重定向到仪表板，这样您的PrivateRoute 组件就不会强制进行不必要的重定向。