Swagger UI权限控制需求：未授权隐藏Try it out按钮，完成授权则显示

嘿，我刚好在项目里实现过这个需求，给你分享两个靠谱的方案，都是基于Swagger UI的自定义脚本就能搞定～

先说说核心逻辑 #

我们需要监听Swagger UI的授权状态变化，动态控制所有Try it out按钮的显示与隐藏：未授权或者没完成「Available authorizations」里的配置时隐藏按钮，等授权配置完成后再显示出来。

方案一：直接用事件监听+DOM操作（快速上手） #

这个方案适合不想折腾源码，直接在Swagger UI的页面里加段脚本就能实现：

首先，在初始化Swagger UI的时候，绑定授权相关的事件，同时页面加载完成后先默认隐藏按钮：

// 初始化Swagger UI（替换成你的配置）
const ui = SwaggerUIBundle({
  url: "your-swagger-spec-url.json",
  dom_id: "#swagger-ui",
  // 其他你需要的配置，比如docExpansion、defaultModelRendering之类的
});

// 封装控制按钮显示的函数
function toggleTryItOutButtons(hasValidAuth) {
  // 找到所有Try it out按钮（如果是Swagger UI v2，选择器改成.btn.try-out）
  const tryItOutButtons = document.querySelectorAll('.try-out__btn');
  tryItOutButtons.forEach(btn => {
    btn.style.display = hasValidAuth ? 'inline-block' : 'none';
  });
}

// 页面刚加载时，默认没授权，先把按钮藏起来
document.addEventListener('DOMContentLoaded', () => {
  toggleTryItOutButtons(false);
});

// 监听授权状态变化事件，实时更新按钮显示
ui.addEventListener('authorize', (event) => {
  // 判断是否有生效的授权：这里检查所有授权方案是否有启用的
  // 如果你的场景只需要特定授权生效才显示，这里可以改成更精准的判断
  const hasValidAuth = Object.values(event.detail.authActions).some(action => action.enabled);
  toggleTryItOutButtons(hasValidAuth);
});

方案二：自定义Swagger UI插件（更优雅的长期方案） #

如果你的项目需要更模块化的代码，或者后续还要扩展Swagger UI的功能，自定义插件会是更好的选择：

// 定义自定义插件
const HideTryItOutWithoutAuthPlugin = () => {
  return {
    statePlugins: {
      auth: {
        wrapSelectors: {
          // 包装授权状态的选择器，监听状态变化
          isAuthorized: (originalSelector) => (state) => {
            const isAuth = originalSelector(state);
            // 状态变化时更新按钮显示
            updateTryItOutButtons(isAuth);
            return isAuth;
          }
        }
      }
    }
  };
};

// 按钮控制逻辑和之前一致
function updateTryItOutButtons(isAuthorized) {
  const buttons = document.querySelectorAll('.try-out__btn');
  buttons.forEach(btn => {
    btn.style.display = isAuthorized ? 'inline-block' : 'none';
  });
}

// 初始化Swagger UI时引入这个插件
const ui = SwaggerUIBundle({
  url: "your-swagger-spec-url.json",
  dom_id: "#swagger-ui",
  plugins: [HideTryItOutWithoutAuthPlugin],
  // 其他配置...
});

// 初始加载后默认隐藏按钮
document.addEventListener('DOMContentLoaded', () => {
  updateTryItOutButtons(false);
});

一些注意事项 #

• 授权有效性的判断逻辑：上面的代码是判断是否有任意一个授权方案启用，如果你的场景要求必须完成特定的授权（比如必须填API Key），可以修改hasValidAuth的判断逻辑，比如检查特定授权方案的状态。
• Swagger UI版本兼容：如果是v2版本，DOM选择器需要改成.btn.try-out，事件监听的方式也可能略有不同，需要根据实际版本调整。

内容的提问来源于stack exchange，提问作者swap