如何在 swagger-ui-react 中通过请求发送授权标头？

Question

我在我的应用程序中使用了 swagger-ui-react。但我不知道如何配置将授权添加到 api 请求中。

我从这里找到了一个在 swagger ui 中使用的答案：

window.swaggerUi = new SwaggerUi({...})
...
swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "Basic dXNlcm5hbWU6cGFzc3dvcmQ=", "header"));

但我不知道如何在 swagger-ui-react 中使用。这是我的代码：

import styles from './index.less';

import React from 'react';
// tslint:disable
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';
// tslint:able

const SwaggerComp = params => {
    const auth = params.authorization;
    return (
        <div className={styles.wrapper}>
         <SwaggerUI
           url="/v2/swagger-file-url"
           withCredentials
         />
       </div>
    )
};

export default SwaggerComp;

Answer 1

Authorization要在“尝试”请求中发送标头，您的 API 定义文件 ( /v2/swagger-file-url) 必须定义适当的操作安全性。在进行“尝试”之前，用户需要单击“授权”按钮输入身份验证信息（例如基本身份验证的用户名和密码）。

OpenAPI 3.0 示例：

openapi: 3.0.2

components:
  securitySchemes:
    basicAuth:
      type: http
      scheme: basic

security:
  - basicAuth: []

OpenAPI 2.0 示例：

swagger: '2.0'

securityDefinitions:
  basicAuth:
    type: basic

security:
  - basicAuth: []

有关更多信息，请参阅：

• OpenAPI 3.0认证指南
• OpenAPI 2.0身份验证指南