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

Posted 2023-02-22

【中文标题】使用身份验证保护 React Route 中内容的正确方法？

【英文标题】：Proper way to secure content in React Route with Authentication?

【发布时间】：2019-10-26 07:40:45

【问题描述】：

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

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

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

我的想法：

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

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

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

谢谢。

【问题讨论】：

你打对了所有音符；保护静态资源的真正方法是在服务器上。至于不允许前端发现此类文件，动机是什么？是否有任何静态资源特别敏感？如果是这样，您是否应该对它们进行服务器端身份验证？从本质上讲，我是在试图劝阻你不要做“默默无闻的安全”。假设您的静态资源的地址是已知的。会不会有什么不好的事情发生？如果是这样，请在服务器上对其进行身份验证。

【参考方案1】：

有几种方法可以解决这个问题。

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

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

【参考方案2】：

您可以制作 hoc，它将包装您的受保护组件并检查他是否已通过服务器身份验证。如果不将他重定向到主页或其他地方。

【讨论】：

这里的问题是，任何知道如何检查站点的人都可以查看您的所有 JS 代码，而不管授权如何，因为它是一个静态站点。