Javascript 使用代码拆分获取块时包含标头

我使用代码拆分将我的应用程序的受限部分拆分为不同的块。到目前为止，它工作得很好，现在我想确保文件本身不会得到服务，除非经过身份验证。我正在考虑使用ngx\u http\u auth\u request\u模块

它允许在提供某些文件之前发送子请求。当React想要获取必要的区块时，如何确保某些标头始终作为HTTP请求的一部分发送？

关于Sure请求 webpack的一个属性是，它在加载页面时只能获取必要的块。您可以在必要时使用like require.ensurn查询块，因此无需确保某些标题

ngx_http_身份验证请求_模块 Ngx_http_auth_request_模块和sub request总是用来在服务器中获取web文件。它总是用作后端身份验证模块。以下是nginx中的数据流方向

下载文件时，下载请求将传递给服务器，然后服务器将覆盖Http请求返回给Nginx，Nginx将找到确切的文件

ngx_http_auth_request_模块允许将请求发送到后台服务器（如php.tomcat），并根据请求是否通过，如果通过，您将能够在后台服务器中获取文件

nginx------加载速度 nginx总是获取静态文件，比如index.html。如果每次都要验证每个js/css的权限，然后获取它，页面的加载速度会非常慢

关于如何进行身份验证 由于您已经分离了应用程序。这里有一些建议。您只需在经过身份验证的文件中导入受限制的部分即可获得经过身份验证的请求。其余部分将由网页自动处理

从非限制部分的服务器获取数据，并使用以下信息进行身份验证：

基于服务器中的信息进行身份验证，并将其他类似信息的类型传递回前端

基于要查看的类型信息

---

if（this.props.type==“restrict”）{
}否则{
}

我很难理解为什么您需要阻止未经验证的恶意用户访问您的静态块

动态导入和代码拆分主要用于减少大型应用程序的捆绑包大小，因为用户不一定需要所有东西

为了保护你的应用程序，你需要防止用户看到或篡改他们无权访问的数据。这意味着安全性取决于你的应用程序所使用的API

我所做的：

• 拒绝对API的未经验证的请求
• 保持令牌客户端处于身份验证状态
• 在所有请求上传递并检查令牌
• 过时时刻录令牌并重定向到登录
• 当用户无权访问某些数据或最好不要显示他们无权访问的内容时，通知、重定向用户

我相信你已经做了我上面写的，我想强调的是块基本上是空的UI，填充了来自安全API的数据

假设我有恶意，为了访问受限制的块，我绕过了客户端路由。它将是一个带有安全API路由的空UI，我将无法使用它做任何事情

---

如果您有非常特殊的需求，您可能需要编写一个网页包插件。

既然这些请求是公共资产，为什么要对它们进行身份验证？@guilherme santiago因为它不应该是公共的，那么它就不应该在您的客户端中logic@GuilhermeSantiago嗯，没错，但是客户端仍然需要请求一些东西来显示它。逻辑（谁经过身份验证，谁没有经过身份验证）发生在服务器上，但客户端需要发送一些东西来识别用户。尽管如此，这是有道理的……身份验证发生在非限制部分，如LoginComponent，服务器返回的内容需要在尝试获取限制部分时再次传递给nginx。这就是我看到的问题所在，要么我完全拆分应用程序，只加载一个不同的页面，要么在获取块时以某种方式将cookie传递到标题中。@Mahoni我已经更改了如何进行身份验证。这是不够的。Webpack确实会将应用程序的两个部分拆分为两个或多个区块文件。然而，在非限制部分的源代码中，您仍然可以找到块文件名，只需自己获取它们，因此该部分并没有得到真正的保护。它是模糊的，或者最多隐藏一点。这就是为什么我明确地问，如果或者如何添加一个机制，在获取这些块时发送额外的头。这应该会增加额外的安全卫生。虽然它只是一个空的用户界面，但它仍然告诉用户更多他们可能不应该知道的信息。总的来说，我认为这样做的好处是减少了可能的攻击面。我认为写一个网页插件将是一个不错的选择。我接受了你的答案，因为对网页插件的需求似乎是不可避免的。

if (this.props.type === "restrict"){   
   <restrict component/>
} else {
   <non-restrict component/>
}