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

Question

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

我从 here 中找到了在 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 header ，您的 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: []

有关详细信息，请参阅:

• Authentication OpenAPI 3.0 指南
• Authentication OpenAPI 2.0 指南