Реагировать - Маршрутизация и перенаправление после входа на страницу попытки - PullRequest
Новая
       15

Реагировать - Маршрутизация и перенаправление после входа на страницу попытки

0 голосов
/ 26 июня 2018

Какова лучшая практика для реализации response-router 4? В настоящее время я создал два компонента, PrivateRoute и PublicRoute. PublicRoute - для /login пути, и он отображает Login компонент, а PrivateRoute - для остальных путей, и он передает переданный компонент, если пользователь вошел в систему или выполняет перенаправление. PrivateRoute код: 

const PrivateRoute = ({component: Component, ...rest}) => (
<Route {...rest} render={(props) => (
    helpers.getCurrentUser()
        ? (
            <div className="wrapper">
                <Sidebar/>
                <div id="content">
                    <Navbar/>
                    <Component {...props}/>
                    <Footer/>
                </div>
            </div>
        ) :
        <Redirect
            to={{
                pathname: "/login",
                state: {from: props.location}
            }}
        />
)}/>

);

И Router компонент в том же файле: 

export default () => (
<Router history={history}>
    <Switch>
        <Route exact path={'/login'} component={PublicRoute}/>
        <PrivateRoute exact path={"/"} component={Dashboard}/>
        <PrivateRoute exact path={"/users"} component={UsersComponent}/>
        <PrivateRoute exact path={"/logs"} component={LogsComponent}/>
        <PrivateRoute exact path={"/project"} component={ProjectComponent}/>
        <PrivateRoute exact path={"/user"} component={UserComponent}/>
    </Switch>
</Router>

);

Как реализовать перенаправление на страницу попытки, если она не зарегистрирована?

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Поскольку вы уже передаете местоположение, откуда вы пришли в качестве состояния местоположения, для Перенаправления в PrivateRoute, вы можете использовать то же самое при перенаправлении обратно из компонента Вход в систему

В компоненте входа в систему вы получите 

onSuccessLogin = () => {
   const {location} = this.props;
   if(location.state && location.state.from) {
      this.props.history.push(location.state.from);
   } else {
      this.props.history.push('/');
   }
}
0 голосов
/ 27 июня 2018

Вы должны использовать метод жизненного цикла компонента componentDidUpdate для обработки обновления маршрута, как описано в Руководство по миграцииact-router-4 .

Например: 

class AppContainer extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route path='*' component={RootRoute}/>
        </div>
      </BrowserRouter>
    )
  }
}

class RootRoute extends React.Component {
  static propTypes = {
    history: PropTypes.object, // this prop comes from withRouter feature
    location: PropTypes.object, // this prop comes from withRouter feature
    user: PropTypes.object // this prop should come from your App
  }

  componentDidUpdate() {
    this.checkSession({
      location: this.props.location.pathname,
      user: this.props.user
    })
  }

  checkSession({location, user}) {
    if (!user.isLogged() && !user.isLocationPublic(location)) {
      this.props.history.push('/login')
    }
  }

  render() {
    return (
      <div>
        <Switch>
          <Route path='/login' component={LoginRoute}/>
          <Route path='/backoffice' component={BackOfficeRoute}/>
        </Switch>
      </div>
    )
  }
}

export default withRouter(RootRoute)
...