Аутентификация с помощью React Router и Spring Security

Question

Я создаю приложение с полным стеком с помощью React и Spring Boot, но столкнулся с одной проблемой, на которую я нигде не нашел ответа.

Поведение, которое я пытаюсь достичь, заключается в следующем:

1. Если пользователь хочет зайти на страницу входа в систему или зарегистрироваться, я хочу перенаправить пользователя на домашнюю страницу, если они аутентифицированы. isAuthenticated - это флаг в редуксе, который я устанавливаю при первой загрузке приложения.

2. Я также хочу перенаправить пользователя на страницу входа, если он не прошел проверку подлинности и пытается зайти на домашнюю страницу.

Первая цель работает отлично, так как существует множество учебных пособий, объясняющих, как для этого использовать response-router, но первая цель, похоже, не работает должным образом в рабочей среде.

У меня есть приложение Spring Boot, работающее как REST API на бэкэнде, и я использую eirslett / frontend-maven-plugin , чтобы упаковать мой фронт и бэкэнд в один jar для развертывания.

Когда я локально раскручиваю и фронт, и бэкэнд как два сервера разработки, приложение перенаправляет меня на страницу входа, если я не вошел в систему (если я пытаюсь получить доступ к защищенным маршрутам с помощью реакции-маршрутизатора) , Тем не менее, я получу страницу ошибки 401, если я перейду непосредственно к маршруту / login, когда не аутентифицирован, но это не выдаст мне ошибку, если я попытаюсь посетить домашний маршрут и будет перенаправлен на / login. Поэтому, даже если я просто перенаправлен на / login, я не могу обновить страницу sh, иначе она выдаст ошибку 401.

Компонент root моего интерфейса React выглядит это, который использует React-router:

function App() {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <div className='AppContainer'>
          <Navbar />
          <Switch>
            <PublicRoute path='/login' component={Login} />
            <PublicRoute path='/register' component={Register} />
            <PrivateRoute path='/' component={Todos} />
          </Switch>
        </div>
      </ConnectedRouter>
    </Provider>
  );
}

export default App;

Компонент PublicRoute и PrivateRoute, который я использовал, выглядит следующим образом:

function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: '/login', state: { from: props.location } }}
          />
        )
      }
    ></Route>
  );
}

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(PrivateRoute);

function PublicRoute({ component: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Redirect to={{ pathname: '/', state: { from: props.location } }} />
        ) : (
          <Component {...props} />
        )
      }
    ></Route>
  );
}

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(PublicRoute);

Кто-нибудь знает, что происходит ? Я чувствую, что проблема существует из-за того, как я настроил свой компонент PublicRoute и Spring Security, но я не знаю, как заставить их работать вместе. Или, насколько я понимаю, мое приложение будет загружаться только при первом посещении моего маршрута root, поэтому оно перенаправит меня в / login; но если первой страницей, которую я посещаю, будет / login, компонент root React не будет загружен, и поэтому этот маршрут защищен моей конфигурацией Spring Security. Но есть ли способ обойти это?

Любая помощь приветствуется!

Answer 1

Я понял это, поняв, что я использую BrowserRouter вместо HashRouter, и именно поэтому я получаю 401 и 404. Документация о реагирующем маршрутизаторе фактически дает отличное объяснение того, почему следует использовать HashRouter здесь .