swagger-ui-react渲染openapi.json显示api文档，配置服务器和认证信息

新时代的弩力

已于 2024-11-25 09:30:57 修改

阅读量187

点赞数 1

文章标签： ui react.js json

于 2024-11-20 16:30:58 首次发布

本文链接：https://blog.csdn.net/qq_42372534/article/details/143918267

版权

import { useState } from "react"
import "./App.css"
import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

function App() {
  const apiJson = {
    openapi: "3.0.0",
    info: {
      title: "Example API",
      description: "这是一个示例API，用于展示如何在OpenAPI规范中配置授权验证和多服务器选项。",
      version: "1.0.0",
      termsOfService: "https://example.com/terms/"
    },
    servers: [
      {
        url: "https://{ip}:{port}/{basePath}",
        description: "测试环境服务器",
        variables: {
          ip: {
            default: "127.0.0.1",
            description: "服务器ip"
          },
          port: {
            // enum: ["8081", "8082"],
            default: "8081"
          },
          basePath: {
            default: ""
          }
        }
      },
      {
        url: "https://api.example.com/v1",
        description: "生产环境"
      }
    ],

    components: {
      securitySchemes: {
        // oauth2: {
        //   type: "oauth2",
        //   flows: {
        //     implicit: {
        //       authorizationUrl: "https://example.com/oauth2/authorize",
        //       scopes: {
        //         read: "读取权限",
        //         write: "写入权限"
        //       }
        //     }
        //   }
        // },
        // basicAuth: {
        //   type: "http",
        //   scheme: "basic"
        // },
        // Jwt: {
        //   type: "http",
        //   scheme: "bearer",
        //   bearerFormat: "JWT"
        // },
        apiKey: {
          type: "apiKey",
          name: "X-Test-Authorization",
          in: "header"
        }
      },
      schemas: {
        User: {
          type: "object",
          properties: {
            id: {
              type: "integer",
              format: "int64"
            },
            username: {
              type: "string"
            },
            email: {
              type: "string",
              format: "email"
            }
          },
          required: ["id", "username"]
        },
        Lanzi: {
          type: "array",
          items: {
            type: "string"
          },
          required: true
        }
      }
    },
    paths: {
      "/users/me": {
        get: {
          summary: "获取当前用户的个人信息",
          operationId: "getUserProfile",
          responses: {
            200: {
              description: "成功返回用户信息",
              content: {
                "application/json": {
                  schema: {
                    $ref: "#/components/schemas/User"
                  }
                }
              }
            },
            401: {
              description: "未授权"
            }
          }
        }
      }
    },
    security: [
      {
        apiKey: []
      }
    ]
  }

  return <SwaggerUI spec={apiJson} displayOperationId />
}

export default App