用于前端开发的可插拔 Keycloak-JS

Posted 2023-02-19

【中文标题】用于前端开发的可插拔 Keycloak-JS

【英文标题】：Pluggable Keycloak-JS for Frontend Development

【发布时间】：2021-07-15 12:28:24

【问题描述】：

我们正在使用 Keycloak 和 keycloak-js 来保护我们在生产中的 Web 应用程序。所以它被深度集成到我们的前端中。 要开始开发，我们总是需要启动一个 keycloak 容器。

有没有什么好的方法可以绕过 keycloak-js 并在开发过程中摆脱 keycloak 容器？ 当前的方法是在NODE_ENV 上进行功能切换。 你怎么看？

【参考方案1】：

目前，我使用webpack.DefinePlugin 找到了一个非常好的解决方案。 我定义了一个MYAPP_PRODUCTION 变量并在构建过程中通过Webpack 替换它。 如果 MYAPP_PRODUCTION 为 false，则覆盖我的 keycloak 对象/导出并模拟所需的功能。

Webpack 配置： 更多信息：https://webpack.js.org/plugins/define-plugin/

new webpack.DefinePlugin(
  MYAPP_PRODUCTION: JSON.stringify(true),
  ...

应用内引导

// sourcecode
if(!MYAPP_PRODUCTION) 
  // mock keycloak here

生产模式下的编译输出将不包含 if 子句中的语句。 webpack 将自动省略条件内容，因为if (!true) ... 永远不会为真。