如何使用基于弹簧引导的身份验证保护 reactjs 资源?

Question

我当前的项目状态：

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

问题：

我

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

谢谢！

Answer 1

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

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

现在，用户只有在通过后端 API 进行身份验证时才能转到配置文件屏幕。