React Router запомнить предыдущий url

120

17 ноября 2020, 21:30

Всем привет у меня есть такая вот проверка на авторизованность, если пользователь открывает страницу и он не авторизован то его редиректит на страницу авторизации

const CheckRoute = ({
  component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      const isLoggedIn = !!Cookies.get('token');
      return isLoggedIn ?
        (<Component {...props} />)
        :
        (<Redirect to={{pathname: '/login' }}/>);
    }
    }
  />
);
export default () => (
  <Switch>
    <CheckRoute path="/" exact component={Home}/>
    <CheckRoute path="/users" exact component={UserList}/>
    <CheckRoute path="/logout" exact component={LogOutRoute}/>
    <Route path="/login" render={props => {
      const isLoggedIn = !!Cookies.get('token');
      return !isLoggedIn ?
        (<LogIn/>)
        :
        (<Redirect to={{pathname: '/'}}/>);
    }}/>
    <Route path="/users/:id" exact component={UserDetail}/>
    <Route component={NotFound}/>
  </Switch>
);

Как сделать так, чтобы после авторизации он возвращался на страницу с которой пришел, т.е предыдущая куда он хотел попасть но его редиректнуло, как например через localstorage

Answer 1

В самой простой реализации будет выглядеть следующим образом. Предположим у нас есть корневой компонент App, в него мы попадаем в первую очередь, объявим внутри constructor переменную в state и запомним наш url с коротого мы пришли:

this.state = {
  url: window.location.href,
}

Просто сохраним URL целиком в состоянии родительского компонента. При этом Route и Redirect не должны породить перезагрузку страницы, чтобы значение url не перезаписалось в состоянии компонента. Напишем здесь же метод, который будет вызываться, когда пользователь войдет:

afterLogIn() {
  document.location.assign(this.state.url);
}

Метод максимально простой, он загружает ресурс по URL, указанному в качестве параметра. Этот параментр мы достаем из стейта. Данный метод нужно передать в компоненту логина через props и вызвать после успешного входа пользователя. Чтобы редирект успешно отработал, должно быть полное соответсвие URL, так как у вас используется признак exact в рутах. Это своего рода маленький костылик (в любом случае нужно сохранить URL с которого мы пришли, чтобы потом заредиректить на него).

Полезные ссылки: