使用React路由器和Spring Security进行身份验证

Question

我正在用React和Spring Boot构建一个完整的堆栈应用程序，但是遇到了一个问题，我在任何地方都没有找到答案。

我试图实现的行为如下：

>

如果用户想要访问登录或注册页面，我想要重定向用户到主页，如果他们被认证。在redux中，我在应用程序首次加载时设置了一个标志。

我还想重定向用户到登录页面，如果他们没有经过身份验证，并试图访问主页。

第一个目标工作正常，因为有很多教程解释如何使用反应路由器来实现这一点，但是第一个目标似乎在生产中不能正常工作。

我有一个Spring Boot应用程序作为REST API在后端运行，我正在使用eirslett/frontend maven插件将我的前端和后端打包到一个jar中进行部署。

当我将前端和后端分别作为两个本地开发服务器启动时，如果我没有登录，应用程序将把我重定向到登录页面（如果我试图通过react-router访问安全路由）。然而，它会给我一个错误401页，如果我直接去 /login路由时，没有经过身份验证，但它不会给我错误，如果我试图访问主路由，并被重定向到 /login.因此，即使我被重定向到 /login很好，我也不能刷新页面，否则它会给我错误401。

我的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;

我所使用的PublicRoad和Private ateRoad组件如下所示：

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的方式，但我不知道如何让它们协同工作。或者，根据我的天真理解，只有在我第一次访问根路径时，我的前端应用程序才会加载，因此它会将我重定向到/login；但是，如果我访问的第一个页面是/login，React的根组件将不会加载，因此这个路由由我的Spring Security配置保护。但有办法解决这个问题吗？

感谢您的帮助！

Answer 1

我想通了，因为我意识到我使用的是浏览器，而不是Hash路由器，这就是为什么我得到了401和404。react-router留档实际上提供了一个很好的解释，说明为什么应该在这里使用Hash路由器。