如何在 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 :

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，传递给道具它看起来像这样：

    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>
        )
    }

根据评论更新：

然后在您的 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>
    );

所以基本上你只是 return authRedirect 变量有条件地基于你的状态是否设置为经过身份验证的状态。

如何在 React / Ant Design Pro 中实现认证路由

How to implement authenticated routes in React / Ant Design Pro

authentication

reactjs

react-router

antd

ant-design-pro