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

Question

我正在使用节点服务器设计 react 应用程序。我创建了一条自定义私有(private)路线

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 并更新我的商店。但是在添加自定义路由后，会重定向到登录页面，这是因为我的自定义路由找不到更新了 store，因为它在仪表板中更新了。我被困在这里了。我尝试更新我的自定义路线，但给自己增加了更多困惑。如有任何建议和解决方案，我们将不胜感激。

谢谢

Answer 1

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

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

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