1

我希望能够执行：

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

1 回答 1

0

我使用 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>
        )
    }

根据评论更新：

然后在您的 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 变量。

于 2019-10-26T19:22:06.537 回答