如何在 React / Ant Design Pro 中实现经过身份验证的路由

Question

我希望能够表演：

router.push('/compose')

如果未登录用户将被重定向到登录页面并从那里转到 /compose。 我很乐意学习通用的 React 解决方案或特定的 Ant Design Pro 解决方案。 我知道 And Design Pro 有 AuthorizedRoute 但我不知道它是否允许这样做。

我正在使用 react-router 4.3.1 和 antd 3.23.6。

谢谢

编辑：

它可能需要类似于@tyler-mcginnin answer:

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

Answer 1

我使用 React-router，然后使用条件来做到这一点。如果我有一个 isAuthenticated 变量，设置为 true 或 false，传递给 props，它看起来像这样：

    let routes = (//unauthenticated routes
        <Switch>
            <Route path = "/auth" component = {Auth} />
            <Redirect to = "/auth" />
        </Switch>
    )

    if(props.isAuthenticated){ //authenticated routes
        routes  = (
            <Switch>
                <Route path = "/manager" component = {DataManager} />
                <Route path = "/logout" component = {Logout} />
                <Redirect to = "/visualiser" />
            </Switch>
        )
    }

基于 cmets 的更新：

然后在您的 auth 组件中创建一个设置 authRediect 变量的变量，然后在您的 JSX 中呈现它。像这样的：

    // This sets up a <Redirect> component so that if the state isAuthenticated is true it will not show the /auth page and isntead will redirect to the desired component:
    let authRedirect = null;
    if (props.isAuthenticated) {
        authRedirect = <Redirect to = "/visualiser" />
    };
...

    return(
            <React.Fragment>
                    {/*The line below performs an auth redirect if the user is authenticated*/}
                    {authRedirect}
                    <h1>Welcome </h1>
            </React.Fragment>
    );

因此，基本上您只需根据您的状态是否设置为已验证状态，有条件地返回 authRedirect 变量。