Не удается перенаправить, если вы не авторизованы в React Token auth

Question

У меня есть это приложение, внешний интерфейс - React, а внутренний - Laravel. Я сделал систему аутентификации, используя Laravel Passport. Когда пользователь залогинен, я сохраняю токен в локальном хранилище. Если пользователь не вошел в систему, я хочу автоматически перенаправить на /login. Обычно пользователь ничего не может сделать, если он не вошел в систему. Я попробовал это:

<BrowserRouter>
    <Route path="/login" exact component={FormularAuth} />
        {
          isAuthenticated ? (
            <React.Fragment>
              *ALL OTHER ROUTES ARE HERE, AND IF LOGGED IN, IT WORKS*
            </React.Fragment>
           ) : ( 
                   window.location = '/login')
               )
         }
</BrowserRouter>

Он отправляет меня на страницу /login, но обновляется, и я не могу войти или что-то еще. В чем здесь проблема?

Answer 1

реакции маршрутизатора v4 поддерживает использование PrivateRoute.

// create a private route, if user is not logged in redirect to login page
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
      isAuthenticated() === true
        ? <Component {...props} />
        : <Redirect to='/login' />
  )} />
)

Используйте его как обычный маршрут и проверяйте аутентификацию на частном маршруте.

<BrowserRouter>
  <Route path="/login" exact component={FormularAuth} />
  <PrivateRoute path='/private' component={Private} />
</BrowserRouter>