通过身份验证在React Route中保护内容的正确方法吗？

Question

我正在尝试使用React设置受保护的路由（以我的情况为首页）。它在客户端上工作正常。如果未通过服务器验证，它将重新路由到登录页面。但是从技术上讲，未经身份验证的用户仍然可以通过筛选代码或通过在开发工具中设置状态来检出受保护路由上的静态内容（尽管对服务器的api调用当然是安全的）。我不喜欢这样。

TLDR问题：如何确保未经身份验证的用户也看不到受保护路由中的静态内容？

我知道身份验证必须从客户端转移到服务器。但是使用React / React Router做到这一点的正确方法是什么？

我的想法：

-仅登录即可提供未经身份验证的react app / index.html。通过身份验证后，为用户的内容/页面提供另一个应用。

-也许可以从服务器进行一些组件的延迟加载，这些加载也可以检查请求的身份验证？

我的上下文：使用okta身份验证，创建反应应用程序，表达/节点后端。

谢谢。

Answer 1

使用多种方法可以解决此问题。

首先是使用Next.js之类的框架在服务器端呈现所有内容。由于搜索引擎对SSR页面的友好性，许多大型企业都使用此框架。不过，在您的情况下，它将解决您仅在获得授权的情况下才显示内容的问题。

但是，在大多数React.js应用程序中，您的数据来自隐藏在后端背后的数据源，例如MongoDB。未经授权的用户只能在您的JS中看到的唯一代码/信息是页面的总体布局。

Answer 2

您可以创建将包装受保护组件并检查其是否已通过服务器验证的临时文件夹。如果没有将他重定向到首页或其他地方。