react react-router-dom私有路由不工作时，从cookie异步加载身份验证令牌

Question

我有一个react/redux应用程序，使用“react router dom”进行路由。我在我的App.js中使用了以下内容（标记为react bootstrap，以提供私有路由。如果且仅当用户未登录时（基于cookie的存在），预期行为将重定向到/login）。实际行为是，即使用户登录，应用程序也会立即重定向到/login。

class MainContainer extends Component {
  constructor(props) {
    super(props);
    this.props.loadAuthCookie();
  }

  PrivateRoute = ({ component: ChildComponent, ...rest }) => {
    return (
      <Route
        {...rest}
        render={(props) => {
          if (!this.props.auth.loggedIn && !this.props.auth.authPending) {
            return <Redirect to="/login" />;
          } else {
            return <ChildComponent {...props} />;
          }
        }}
      />
    );
  };

  render() {
    const { PrivateRoute } = this;
    return (
      <Router>
        <Container fluid id="root">
          <Header />
          <Switch>
            <Row className="pageContainer">
              <Col>
                <PrivateRoute exact path="/" component={HomeScreen} />
                <Route
                  exact
                  path="/clusters/"
                  component={clusterOverviewScreen}
                />
                <Route exact path="/login" component={LoginPage} />
              </Col>
            </Row>
          </Switch>
        </Container>
      </Router>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    auth: state.auth,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    loadAuthCookie: () => {
      return dispatch(loadAuthCookie());
    },
  };
};

const RootContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(MainContainer);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <RootContainer />
      </Provider>
    );
  }
}

函数this.props.loadAuthCookie发送一个redux操作，该操作将提取包含auth令牌（如果存在）的cookie，并将其置于状态。初始状态为

{
    "authPending": false
    "loggedIn": false
    "authToken": null
}

它变成：

{
    "authPending": true
    "loggedIn": false
    "authToken": null
}

最后：

{
    "authPending": false
    "loggedIn": true
    "authToken": TOKEN
}

我是一个比较新的反应。我的猜测是，在PrivateRoute函数运行时，redux操作尚未设置状态，因此PrivateRoute组件将重定向到登录页面。这个猜测是基于私有路由中的日志记录props.auth.loggedIn，返回false，但是当我重定向到的登录页面完成加载时，组件props声明This.props.loggedIn为true。不过，我不确定如何修复这个问题。

编辑：loadAuthCookie操作：

export const loadAuthCookie = () => (dispatch) => {
  dispatch(AuthReducer.setAuthPending());
  try {
    const cookie = Cookies.get("token");
    if (cookie) {
      dispatch(AuthReducer.setLoginSuccess(cookie));
    }
  } catch (err) {
    console.log(err);
    dispatch(AuthReducer.setLogout());
  }
};

Answer 1

我认为托尼是对的；您可能需要调用this.props.loadAuthCookie（） 此组件生命周期的后面部分。

当（且仅当）组件被实例化时，构造函数才会运行；与安装或渲染时相反。构造函数通常在装入或呈现之前调用一次。

因此，调用this.props.loadAuthCookie（）可能在componentDidMount内部也能工作，但我还是同意Tony的建议，在render（）函数中尝试一下。

Answer 2

私人路由似乎实现不正确。

它应设计为“等待”，直到authPending变为false或loggedIn变为true。

但在现实中，它要求两者都为真，这样它就不会重定向到登录。因此，如果authPending:true直到loggedIn:true，则实现“等待”。

以下是结果表。

也不要使用像这样的条件！洛格丁

<Route
    {...rest}
    render={(props) => {
        if (this.props.auth.loggedIn) {
            return <ChildComponent {...props} />;
        } else if (this.props.auth.authPending) {
            return <LoadingScreen/> // Or could simply div with text. Not different component
            // Then state updates after x seconds and re-renders
        } else {
            return <Redirect to="/login" />;
        }
    }}
/>

编辑：我实际上弄错了逻辑，要么是AuthPding

function test(first, second) {
    if (!first && !second) {
        console.log('login');
    } else {
        console.log('child');
        
    }
}

test(true, true);
test(false,false);
test(true, false);
test(false, true);

输出：

child
login
child
child

看，我还是不能动脑！；