需实现Swagger UI内登录，替代前端获取Bearer Token的方式

1. 调整Swagger全局安全配置 #

修改你的Swagger配置options，移除全局强制认证规则，改为在单个接口中按需指定认证要求：

const options = {
  definition: {
    openapi: "3.0.0",
    info: {
      title: "Ai Platform api doc",
      version: "1.0.0",
      description: "This is our api documentation for our web application, Ai Platform. Made with express and documented with Swagger",
    },
    servers: [
      {
        url: `http://localhost:${port}`,
      },
    ],
    components: {
      securitySchemes: {
        bearerAuth: {
          type: "http",
          scheme: "bearer",
          bearerFormat: "JWT",
          in: "header",
        },
      },
      // 预定义登录请求/响应的Schema
      schemas: {
        LoginRequest: {
          type: "object",
          required: ["username", "password"],
          properties: {
            username: { type: "string", description: "用户名" },
            password: { type: "string", description: "用户密码" }
          }
        },
        LoginResponse: {
          type: "object",
          properties: {
            token: { type: "string", description: "Bearer格式的JWT Token" }
          }
        }
      }
    },
    // 移除全局security配置，避免所有接口默认要求认证
    // security: [
    //   {
    //     bearerAuth: {},
    //   },
    // ],
  },
  apis: ["./routes/*.js"],
};

2. 给登录接口添加Swagger注释 #

在登录路由文件（如./routes/auth.js）中，添加接口注释，明确该接口无需认证，并定义请求体和返回格式：

/**
 * @swagger
 * /api/auth/login:
 *   post:
 *     summary: 用户登录获取JWT Token
 *     tags: [认证模块]
 *     security: [] # 标记该接口不需要Bearer认证
 *     requestBody:
 *       required: true
 *       content:
 *         application/json:
 *           schema:
 *             $ref: '#/components/schemas/LoginRequest'
 *     responses:
 *       200:
 *         description: 登录成功，返回Token
 *         content:
 *           application/json:
 *             schema:
 *               $ref: '#/components/schemas/LoginResponse'
 *       401:
 *         description: 用户名或密码错误
 */
router.post('/api/auth/login', (req, res) => {
  // 你的登录逻辑：验证账号密码，生成并返回Token
  const { username, password } = req.body;
  // 示例验证逻辑
  if (username === 'admin' && password === '123456') {
    const token = 'your-generated-jwt-token';
    return res.json({ token });
  }
  return res.status(401).json({ message: '账号或密码错误' });
});

3. 给需要认证的接口添加安全要求 #

在其他需要Token验证的接口注释中，添加security字段，指定使用bearerAuth认证：

/**
 * @swagger
 * /api/user/profile:
 *   get:
 *     summary: 获取用户信息
 *     tags: [用户模块]
 *     security:
 *       - bearerAuth: []
 *     responses:
 *       200:
 *         description: 获取成功
 *       401:
 *         description: Token无效或未提供
 */
router.get('/api/user/profile', (req, res) => {
  // 你的接口逻辑
});

4. 优化Swagger UI体验（可选） #

启动Swagger UI时开启授权信息持久化，避免页面刷新后重新输入Token：

const swaggerUi = require('swagger-ui-express');
const swaggerSpec = swaggerJsDoc(options);

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec, {
  swaggerOptions: {
    persistAuthorization: true, // 页面刷新后保留已配置的授权信息
  }
}));

使用流程 #

1. 打开Swagger UI页面（如http://localhost:3000/api-docs）
2. 找到「认证模块」下的/api/auth/login接口，点击Try it out
3. 输入用户名和密码，点击Execute获取返回的Token
4. 点击页面右上角的Authorize按钮，输入Bearer 你的Token（注意Bearer后加空格），点击Authorize完成授权
5. 后续调用其他需要认证的接口时，Swagger会自动携带Token

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