如何在 swagger-ui-react 中发送带有请求的授权标头？

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

在 react-swagger-ui 中，他们有一个名为 requestInterceptor 的网络属性，在这里您可以在将请求 json 传递给 api 调用之前对其进行修改，因此您可以添加授权标头在那里，记得在requestInterceptor中返回修改后的json。

要在 json 中设置身份验证标头，有几种方法可以做到，我使用 sigv4 作为授权标头，我使用 Amplify Signer 生成所有必需的标头（授权，X-Amz-Date. .) 在调用 api 之前对我来说，这是链接 here。

Answer 2

要在“试用”请求中发送 Authorization 标头，您的 API 定义文件 (/v2/swagger-file-url) 必须为操作定义适当的安全性。用户需要点击“Authorize”按钮输入认证信息（如Basic auth的用户名和密码），然后才能“试用”。

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 指南