登录后如何利用Bearer Token自动授权Swagger接口？

步骤1：完善Swagger定义中的登录接口响应 #

首先需要给/login接口补充返回值定义，让Swagger UI明确返回的token结构：

components:
  securitySchemes:
    bearerAuth:
      type: http
      scheme: bearer
      bearerFormat: JWT
paths:
  /login:
    post:
      requestBody:
        required: true
        content:
          multipart/form-data:
            schema:
              type: object
              properties:
                username:
                  type: string
                  example: some_user
                password:
                  type: string
                  example: some_password
      responses:  # 新增响应定义
        '200':
          description: 登录成功，返回Bearer Token
          content:
            application/json:
              schema:
                type: object
                properties:
                  token:
                    type: string
                    example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  /some/endpoint:
    get:
      security:
        - bearerAuth: []

步骤2：添加Swagger UI自定义脚本实现自动授权 #

Swagger UI支持通过自定义JS拦截请求和响应，实现类似Postman的自动token存储与注入。你需要在Swagger UI的页面中添加以下脚本（本地部署修改swagger-ui.html，CDN引入则在页面末尾追加）：

document.addEventListener('DOMContentLoaded', function() {
  const ui = SwaggerUIBundle({
    url: "your-swagger-definition-url.yaml", // 替换为你的Swagger定义文件地址
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    layout: "StandaloneLayout"
  });

  // 响应拦截器：处理登录请求返回，存储token并配置授权
  ui.getConfigs().responseInterceptor = function(response) {
    if (response.url.includes('/login') && response.status === 200) {
      try {
        const jsonData = JSON.parse(response.data);
        if (jsonData.token) {
          // 将token存入会话存储，页面刷新后仍可保留
          sessionStorage.setItem('swaggerBearerToken', jsonData.token);
          // 给Swagger UI添加Bearer授权
          const authKey = ui.spec.components.securitySchemes.bearerAuth.name || 'bearerAuth';
          ui.api.clientAuthorizations.add(authKey, new SwaggerClient.ApiKeyAuthorization('Authorization', `Bearer ${jsonData.token}`, 'header'));
        }
      } catch (err) {
        console.error('解析登录响应失败:', err);
      }
    }
    return response;
  };

  // 请求拦截器：给需授权的接口自动携带token
  ui.getConfigs().requestInterceptor = function(request) {
    const token = sessionStorage.getItem('swaggerBearerToken');
    // 登录接口本身无需带token，其他授权接口自动注入
    if (token && !request.url.includes('/login')) {
      request.headers['Authorization'] = `Bearer ${token}`;
    }
    return request;
  };

  // 页面加载时，若存在缓存token则自动恢复授权
  const savedToken = sessionStorage.getItem('swaggerBearerToken');
  if (savedToken) {
    const authKey = ui.spec.components.securitySchemes.bearerAuth.name || 'bearerAuth';
    ui.api.clientAuthorizations.add(authKey, new SwaggerClient.ApiKeyAuthorization('Authorization', `Bearer ${savedToken}`, 'header'));
  }
});

额外说明 #

• 脚本会在用户调用/login接口成功后，自动提取token存入sessionStorage，同时配置Swagger UI的Bearer授权，后续调用需授权接口时会自动带上Authorization请求头。
• 若token有过期时间，可扩展脚本逻辑，在接口返回401（未授权）时触发重新登录（需预先存储账号密码或提示用户重新登录）。
• sessionStorage中的token仅在当前浏览器标签页有效，关闭标签页后自动清除；如需持久化存储，可改用localStorage。

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