Как реализовать аутентифицированные маршруты в React / Ant Design Pro - PullRequest
Новая
       34

Как реализовать аутентифицированные маршруты в React / Ant Design Pro

0 голосов
/ 26 октября 2019

Я хочу иметь возможность выполнить: 

router.push('/compose')

И если не зарегистрированный пользователь будет перенаправлен на страницу входа и оттуда в / составить. Я буду рад изучить общее решение React или конкретное решение Ant Design Pro. Я знаю, что в And Design Pro есть AuthorizedRoute, но я не знаю, может ли это позволить это.

Я использую реагирующий маршрутизатор 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}}} />}
    />
  )
}

1 Ответ

0 голосов
/ 26 октября 2019

Я использую 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 в зависимости от того, установлено ли ваше состояние в состояние с проверкой подлинности или нет.

...