我使用代码拆分将应用程序的受限部分分成不同的块。到目前为止，这种方法运行良好，现在，我想确保除非经过身份验证，否则文件本身不会被提供。我正在考虑使用 ngx_http_auth_request_module
http://nginx.org/en/docs/http/ngx_http_auth_request_module.html#auth_request
允许在发送某些文件之前发送子请求。当React想获取必要的数据块时，如何确保某些标头始终作为HTTP请求的一部分发送？
答案 0 :(得分：1)
webpack的特性之一是，它在加载页面时只能获取必要的块。您可以在需要时使用require.ensurn之类的查询块，因此无需确保某些标头。
Ngx_http_auth_request_module和sub-request总是用于获取服务器中的Web文件，它始终用作后端认证模块，这是nginx中的数据流向。
下载文件时，下载请求将传递到服务器，然后服务器将覆盖的Http请求返回给Nginx，然后Nginx将找到确切的文件。
ngx_http_auth_request_module允许将请求发送到后台服务器（例如php .tomcat），并根据是否通过请求（如果通过），可以在后台服务器中获取文件。
nginx总是获取静态文件，如index.html。如果每次都要验证每个js / css的权限，然后获取它，则页面的加载速度将非常慢。
由于您已分离了应用程序，因此这里有一些建议。您只需导入已认证文件中的受限部分即可获得已认证请求，然后Webpack会自动处理其余部分。
从非限制部分的服务器中获取数据，并提供如下信息以进行身份验证：
基于服务器中的信息进行身份验证，并将其他信息（如类型）传递回前端
if (this.props.type === "restrict"){
<restrict component/>
} else {
<non-restrict component/>
}
答案 1 :(得分：1)
我很难理解为什么您需要阻止未经身份验证的恶意用户访问您的静态块。
动态导入和代码拆分主要用于减少大型应用程序的捆绑包大小，因为用户不一定需要所有内容。
为了保护您的应用程序安全，您需要防止用户看到或篡改他们无权访问的数据。这意味着安全性取决于您的应用与之交谈的API。
我做什么：
我确定您已经完成了上面写的内容，我想强调的是，块基本上是空的UI，其中填充了来自安全API的数据。
比方说，我有恶意，并且绕过客户端路由以访问受限块。这将是一个具有安全API路由的空UI，我将无法对其进行任何操作。
如果您有非常特定的需求，则可能需要编写一个webpack插件。