如何使用基于 Spring Boot 的身份验证保护反应 js 资源？

Question

我目前的项目状态：

• 我正在使用 ReactJs（前端）和 spring boot（后端）开发一个 Web 应用程序。
• 当我部署这个应用程序时，我使用 gradle-node-plugin 将 react 代码与我的 spring boot jar 打包在一起

问题：

• 我知道我应该为所有需要服务器身份验证的资源提供服务。 - 但是，我很难理解是否有办法将我的 react 项目的某些组件/路由放在身份验证 API 后面。
• 例如 Google Docs，Google 不允许您在没有实际登录的情况下创建任何新文档（甚至查看文本画布）。
• 目前只有我从数据库加载的数据受 Spring Security 保护，但我的 react 项目中有一个用 Javascript 编写的设计工具，我也想保护它。
• 这是否可以通过 Spring Security 实现，还是我应该假设我的 react 项目下的所有内容都可以公开访问？
• 换句话说，我如何保护基于 javascript 的仅 UI 页面，您无需进行任何后端调用来获取身份验证信息。

谢谢！

Answer 1

在页面加载时调用 Authenticate API 以查看用户的会话是否通过了身份验证。我认为 Spring Security 可以做到这一点。根据响应，您可以限制路由。

<Route
      {...rest}
      render={({ location }) =>
        authenticateApiResponse.authenticated ? (
          <Redirect
            to={{
              pathname: "/profile",
              state: { from: location }
            }}
          />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />

现在用户只有通过后端 API 的身份验证才能进入 profile 屏幕。