针对用户角色的不同 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 到 enable/disable 一些功能：

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

最后，死代码消除将为您删除这些部分。因此，您将拥有多个包含不同功能的捆绑包。

针对用户角色的不同 React Webpack JS 包

Different React Webpack JS Bundles for User Roles

javascript

authorization

rbac

reactjs

webpack