Swagger UI显示差异：如何调出Authorize按钮？

看起来你碰到了Swagger UI部署后授权按钮不见的麻烦，我来帮你排查下常见原因和解决办法：

1. 检查Swagger UI版本差异 #

Swagger编辑器用的是较新的版本，但你的Node.js项目里可能集成了旧版的Swagger UI。旧版本可能对OpenAPI 3.0+的securitySchemes支持不足，或者压根不显示Authorize按钮。

• 解决方案：升级项目里的Swagger UI依赖。如果用的是swagger-ui-express，执行命令：

  npm update swagger-ui-express
  

• 确认版本：在package.json里查看swagger-ui-express的版本，建议使用4.x以上的版本。

2. 验证Swagger YAML的认证配置是否正确 #

确保你的swagger.yaml里正确定义了认证方案，并且全局或接口级别启用了认证：

• OpenAPI 3.0的配置示例：

  components:
    securitySchemes:
      bearerAuth:
        type: http
        scheme: bearer
        bearerFormat: JWT
  security:
    - bearerAuth: []
  

• 注意：如果是OpenAPI 2.0，需要用securityDefinitions而非components.securitySchemes，旧版UI可能仅支持2.0格式。

3. 检查Swagger UI的初始化配置 #

在Node.js项目中，你可能自定义了Swagger UI的初始化选项，导致按钮被隐藏。比如：

• 如果用swagger-ui-express，确保没有设置supportedSubmitMethods排除认证相关逻辑，或者禁用了showAuth类的配置（部分版本有该选项）。
• 正确的初始化示例：

  const express = require('express');
  const swaggerUi = require('swagger-ui-express');
  const swaggerDocument = require('./swagger.yaml');
  
  const app = express();
  
  app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
    explorer: true, // 可选，启用探索功能
    customSiteTitle: "My API Docs"
    // 避免添加会隐藏授权按钮的配置
  }));
  

4. 排查静态资源加载问题 #

有时候浏览器里Swagger UI的静态资源（如CSS、JS）加载失败，会导致按钮渲染异常。

• 打开浏览器开发者工具（F12），切换到Console和Network标签，查看是否有报错或404的资源。
• 如果是资源路径问题，检查swagger-ui-express是否正确提供了静态资源，或尝试清除浏览器缓存后刷新页面。

5. 确认YAML文件是否被正确加载 #

部署时YAML文件路径错误或内容被篡改，都可能导致认证配置未被读取。

• 在Node.js代码中添加日志，打印swaggerDocument的内容，确认components.securitySchemes和security字段存在：

  console.log('Swagger 认证配置:', swaggerDocument.components?.securitySchemes);
  

按上面的步骤逐一排查，应该能定位到问题所在。

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