我想在 swagger-ui-react 应用程序自动授权中设置 preauthorizeApiKey

Question

我在下面的代码中设置了 preauthorizeApiKey，它工作正常，并且对 API 的调用也正常。API 需要标头“Authorization: Bearer xxxxxxxxxx”。我将密钥存储在 React 存储中并使用 getToken() 读取。

import React from 'react';
import SwaggerUI from 'swagger-ui-react';
import swaggerSpec from '../../swagger.json';
import { getToken } from '../../api/utils'

export const complete=function(swaggerUi)
{
  let token = getToken();
  swaggerUi.preauthorizeApiKey('bearerAuth',  token.Token);
}

const ApiDocs = () => {
  return <SwaggerUI spec={swaggerSpec} onComplete={(swaggerUi) => complete(swaggerUi)} />
};

export default ApiDocs;

下面是我的路由配置：

<Route path="/api-docs" component={ApiDocs} />

我不需要单击 swagger UI 屏幕上的“授权”按钮，它会自动授权。只是想分享任何评论/建议/改进。

Answer 1

onComplete属性应该是一个函数。请参阅此处的文档。

import React from "react";
import SwaggerUI from "swagger-ui-react";
import swaggerSpec from "../../swagger.json";
import { getToken } from "../../api/utils";

export const complete = function (swaggerUi) {
  const token = getToken();
  swaggerUi.preauthorizeApiKey("bearerAuth", token.Token);
};

const ApiDocs = () => {
  return <SwaggerUI spec={swaggerSpec} onComplete={complete} />;
};

export default ApiDocs;