用于用户角色的不同React Webpack JS捆绑包

Question

目前，我正在开发一个具有RBAC的应用程序，因此，根据用户的角色，将为他们提供更多元素。

我使用JWT保护应用程序，该JWT必须在登录时检索，然后在每次API调用时传递并存储在localStorage中。

我的问题是，如果有人更改状态并将我的状态变量设置为已登录并有特定用户，他们将能够看到管理员可以执行的操作，他们可能无法使用后端命令，但可以获取视图可能的结果以及与此相关的端点。

我想知道是否可以使用Webpack分隔捆绑包，以便我们首先可以验证用户的类型正确，然后向他们提供仅包含用户可能选项的SPA？ 有点像服务器端渲染页面时删除了所有其他角色，并保留了其角色的所有功能。

Answer 1

为了基于相同的源代码创建几套捆绑包，您可以从webpack.config.js （ docs ）中导出配置数组。

在每个配置中，您可以使用DefinePlugin随意定义一些必要的标志：

module.exports = [
  {
    //...
    // admin config
    //...
    plugins: [
      new webpack.DefinePlugin({
        ROLE: 'admin'
      })
    ]
  },
  {
    //...
    // user config
    //...
    plugins: [
      new webpack.DefinePlugin({
        ROLE: 'user'
      })
    ]
  }
]

然后，在您的源代码中，您可以使用process.env.ROLE启用/禁用某些功能：

if (process.env.ROLE === 'admin') { /* show red alert button */}

最后，消除无效代码将为您删除这些部分。 结果，您将具有包含不同功能的多个捆绑软件。