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 */}

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

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

1 个答案: