javascript - 使用身份验证保护 React Route 中内容的正确方法？

我正在尝试使用 React 设置受保护的路线（在我的情况下为主页）。它在客户端上运行良好。如果没有被服务器认证，它会重新路由到登录页面。但从技术上讲，未经身份验证的用户仍然可以通过筛选代码或在开发工具中设置状态来检查受保护路由上的静态内容（当然，对服务器的 api 调用是安全的）。我不喜欢这个。

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

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

我的想法：

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

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

我的上下文：create-react-app，express/node 后端，使用 okta auth。

谢谢你。

标签： javascriptreactjsauthenticationreact-routerokta

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

首先是使用 Next.js 之类的框架在服务器端渲染所有内容。由于 SSR 页面的搜索引擎友好性，该框架被大量大型企业公司使用。不过，在您的场景中，它可以解决您仅在某人获得授权时才显示内容的问题。

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