如何在Swagger 3.0中实现自动基础认证，无需手动输入凭证？

Great question! You absolutely can set up auto-authorization in Swagger 3.0 (OpenAPI 3.x) — both through your YAML/OpenAPI spec file and by modifying Swagger UI's index.html. Let me walk you through both approaches clearly:

This method embeds the authorization rules directly into your API definition, making it work wherever your spec is loaded.

Step 1: Define Your Security Scheme #

First, specify your authorization type (Bearer token, API key, etc.) under components.securitySchemes in your YAML:

components:
  securitySchemes:
    BearerAuth:  # Name your security scheme (can be any name)
      type: http
      scheme: bearer
      bearerFormat: JWT  # Optional, just adds clarity for users

Step 2: Apply Global Authorization #

Add a top-level security section to enforce this auth for all endpoints by default — users won't need to select it per API:

security:
  - BearerAuth: []

Step 3: Pre-Fill Credentials (Optional) #

If you want to auto-populate the token field (so users don't even need to paste it once for local testing), use the x-swagger-ui-config extension:

x-swagger-ui-config:
  persistAuthorization: true  # Keeps the token saved after page reload
  requestInterceptor: |
    (req) => {
      // Replace with your test token
      req.headers.Authorization = 'Bearer YOUR_TEST_JWT_TOKEN';
      return req;
    }

Important: Hardcoding tokens is only safe for local/test environments. Never do this in production — it exposes sensitive credentials to anyone with access to your spec.

If you're hosting Swagger UI yourself (not using SwaggerHub), modifying the index.html gives you more control over the UI's behavior.

Step 1: Find the Swagger UI Initialization #

In your index.html, look for the SwaggerUIBundle initialization block — it usually looks like this:

const ui = SwaggerUIBundle({
  url: "your-api-spec.yaml",
  dom_id: '#swagger-ui',
  layout: "BaseLayout",
  // ... other default options
});

Step 2: Add Auto-Authorization Logic #

Update the initialization to include persistAuthorization and a requestInterceptor to auto-inject the token into every request:

const ui = SwaggerUIBundle({
  url: "your-api-spec.yaml",
  dom_id: '#swagger-ui',
  layout: "BaseLayout",
  persistAuthorization: true,
  requestInterceptor: (req) => {
    // Auto-add the Bearer token to all outgoing requests
    req.headers.Authorization = 'Bearer YOUR_TEST_JWT_TOKEN';
    return req;
  },
  // Keep other existing options
});

Step 3: Pre-Authorize the Security Scheme (Optional) #

To make the "Authorize" button show as already authorized on page load, add this code right after initializing the UI:

// For Bearer token auth, directly apply the authorization
ui.authActions.authorize({
  BearerAuth: { value: 'YOUR_TEST_JWT_TOKEN' }
});

For OAuth2 flows, you'd use ui.initOAuth() with your client ID and other OAuth settings instead — but this snippet works for simple Bearer/API key cases.

• For production, skip hardcoding tokens. Instead, enable persistAuthorization: true so users only need to enter their credential once, and it stays saved across sessions.
• If you're using SwaggerHub, you can also enable "Auto-Authorize" in the UI's settings panel, but the above methods work for self-hosted Swagger UI instances.

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