使用身份验证保护 React Route 中的内容的正确方法？
Proper way to secure content in React Route with Authentication?
我正在尝试使用 React 设置受保护的路由（在我的例子中是主页）。它在客户端上运行良好。如果未通过服务器身份验证，它将重新路由到登录页面。但从技术上讲，未经身份验证的用户仍然可以检查受保护路由上的静态内容（当然 api 对服务器的调用是安全的），只需筛选代码或在开发工具中设置状态即可。我不喜欢这个。
TLDR 问题：如何确保即使是受保护路由中的静态内容也不会被未经身份验证的用户看到？
我知道身份验证必须从客户端转移到服务器。但是使用 React/React 路由器的正确方法是什么？
我的想法：
-为登录提供未经身份验证的反应 app/index.html。通过身份验证后，为用户 content/pages.
提供另一个应用程序
-也许可以从同时检查请求身份验证的服务器进行一些组件延迟加载？
我的上下文：create-react-app，express/node 后端，使用 okta auth。
谢谢。
你可以制作 hoc 来包装你的受保护组件并检查他是否被服务器验证。如果没有将他重定向到主页或其他地方。
有多种方法可以解决这个问题。
首先是 server-side 使用像 Next.js 这样的框架渲染所有内容。由于 SSR 页面的搜索引擎友好性，该框架被大量大型企业公司使用。不过，在您的情况下，它可以解决您仅在有人获得授权时才显示内容的问题。
但是，在大多数 React.js 应用中，您的数据来自 MongoDB 等隐藏在后台的数据源。 code/information 未经授权的用户唯一能够在您的 JS 中看到的是页面的总体布局。
我正在尝试使用 React 设置受保护的路由（在我的例子中是主页）。它在客户端上运行良好。如果未通过服务器身份验证，它将重新路由到登录页面。但从技术上讲，未经身份验证的用户仍然可以检查受保护路由上的静态内容（当然 api 对服务器的调用是安全的），只需筛选代码或在开发工具中设置状态即可。我不喜欢这个。
TLDR 问题：如何确保即使是受保护路由中的静态内容也不会被未经身份验证的用户看到？
我知道身份验证必须从客户端转移到服务器。但是使用 React/React 路由器的正确方法是什么？
我的想法：
-为登录提供未经身份验证的反应 app/index.html。通过身份验证后，为用户 content/pages.
提供另一个应用程序-也许可以从同时检查请求身份验证的服务器进行一些组件延迟加载？
我的上下文：create-react-app，express/node 后端，使用 okta auth。
谢谢。
你可以制作 hoc 来包装你的受保护组件并检查他是否被服务器验证。如果没有将他重定向到主页或其他地方。
有多种方法可以解决这个问题。
首先是 server-side 使用像 Next.js 这样的框架渲染所有内容。由于 SSR 页面的搜索引擎友好性，该框架被大量大型企业公司使用。不过，在您的情况下，它可以解决您仅在有人获得授权时才显示内容的问题。
但是，在大多数 React.js 应用中，您的数据来自 MongoDB 等隐藏在后台的数据源。 code/information 未经授权的用户唯一能够在您的 JS 中看到的是页面的总体布局。