reactjs - React Router 认证路由问题

Question

我正在尝试复制react-router网站上的逻辑authenticating specific routes 。在大多数情况下，它工作正常，但当确定用户的逻辑本质上是异步的时，在检查用户是否仍然被授权时，我似乎遇到了问题。下面列出的是我的私有(private)路由的组件函数。

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated() ? ( 
        <Component {...props}/>
    ) : (
        <Redirect to={{
            pathname: '/login', 
            state: {from: props.location }
        }}/>
    )
  )}/>
)

此逻辑调用我的 isAuthenticated 函数，该函数使用 Amazon Cognito 执行异步调用，并且它始终将 isAuthenticated 视为返回假值，即使我知道它应该返回真值。 isAuthenticated 的代码如下所示:

const isAuthenticated = () => {
    var poolData = {
        UserPoolId : 'XXX', 
        ClientId : 'XXXX'
    };

    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);
    var cognitoUser = userPool.getCurrentUser();

    if (cognitoUser != null) {
        cognitoUser.getSession(function(err, session) {
            if (err) {
                return false;
            }
            else{
                return session.isValid();
            }
        });
    }
    else{
        return false;
    }
}

如果我只是硬编码 isAuthenticated 以返回 true 或 false 值，则它在两种情况下都能正常工作。我的问题是在此上下文中是否允许异步逻辑，或者我是否应该确定此逻辑上游的身份验证状态。

Answer 1

今天早上我遇到了这个问题(甚至不得不检查我是否发布了这个问题)。

我从你的问题中得到了提示，并将异步“isAuthenticated”逻辑移至上游，根据用户的本地存储身份验证结果以两种不同的方式调用 ReactDom.render() 。

我非常有兴趣听到有人提出更好的解决方案，但我的应用程序可以这样工作。谢谢你的主意!