我想在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;

Answer 2

对于仍然无法解决这个问题的人

requestInterceptor函数应该用于操作Request并添加所需的授权

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



const ApiDocs = () => {
 const requestInterceptor = function (req: { [k: string]: any }) {
  const token = getToken();
  req.headers = { ...req.headers, bearerAuth: token  };
  return undefined;
 };
  
 return <SwaggerUI spec={swaggerSpec} requestInterceptor={requestInterceptor} />;
};

export default ApiDocs;