如何在Express/JavaScript的swagger檔案中實作JWT授權標頭

我正在嘗試將以下配置添加到我的swagger.config.ts：

const swaggerUiOptions = {
  explorer: true,
  swaggerOptions: {
    authAction: {
      JWT: {
        name: 'JWT',
        schema: {
          type: 'apiKey',
          in: 'header',
          name: 'Authorization',
          description: ''
        },
        value: 'Bearer <JWT token here>'
      }
    }
  }
};

然后在此之下，我有：

app.use('/api-docs', swaggerUi.serve, swaggerUI.setup(swaggerSpec, swaggerUiOptions));

但是，我希望看到的 Authorize 按鈕不會出現在 UI 中。我不確定整個組態檔中是否有一些東西可能會破壞我添加的內容，因為我沒有寫完整的東西，這里是：

import express from 'express';
import { Model } from "mongoose";
import swaggerJsdoc from "swagger-jsdoc";
import swaggerUi from "swagger-ui-express";
import m2s from 'mongoose-to-swagger';
import { readFileSync } from 'fs';

class SwaggerEndPointInformationDto {
readonly httpMethod: string
readonly httpPath: string

constructor(httpMethod: string, httpPath: string) {
this.httpMethod = httpMethod;
this.httpPath = httpPath
}
}

class SwaggerConfig {
// private readonly app: express.Application;
private built = false;
private static instance: SwaggerConfig;
private models = Array<Model<any>>();

public static getInstance() {
if (!this.instance) {
this.instance = new SwaggerConfig();
}
return this.instance;
}

registerModel(model: Model<any>) {
this.checkIsNotBuilt();
this.models.push(model);
}

// addPathAndMethod()

registerSwaggerPage(app: express.Application, listeners: [(entry: SwaggerEndPointInformationDto) => void]) {
// registerSwaggerPage(app: express.Application) {
this.built = true;

const packageJson = JSON.parse(readFileSync('./package.json').toString());
const swaggerOptions = {
definition: {
openapi: '3.0.0',
info: {
title: packageJson.name,
version: packageJson.version,
}
},
apis: [
'./dist/**/*.js',
],
};
// const swaggerSpec: {paths: never;} = swaggerJsdoc(swaggerOptions);
// @ts-ignore
const swaggerSpec: { paths: string; } = swaggerJsdoc(swaggerOptions);

const swaggerUiOptions = {
explorer: true,
swaggerOptions: {
authActions: {
JWT: {
name: 'JWT',
schema: {
type: 'apiKey',
in: 'header',
name: 'Authorization',
description: ''
},
value: 'Bearer <JWT Token here>'
}
}
}
};

// add to components.schemas
this.models.forEach(model => {
const swaggerModel = m2s(model)
// @ts-ignore
swaggerSpec.components.schemas.push(swaggerModel);
});

// add routes
app._router.stack.filter((e: { route: never; }) => e.route).forEach((element: any) => {
console.log(element)
// if (element?.route?.path?.startsWith('/')) {
//   const httpPath: string = element.route.path
//   // @ts-ignore
//   if (!swaggerSpec.paths[httpPath]) {
//     // @ts-ignore
//     swaggerSpec.paths[httpPath] = {}
//   }
//   // @ts-ignore
//   const pathInfo = swaggerSpec.paths[httpPath];
//   for (const e in Object.keys(element.route.methods)) {
//     const httpMethod = Object.keys(element.route.methods)[e]
//     // console.log(element.route.methods[httpMethod])
//     if (element.route.methods[httpMethod]) {
//       if(!pathInfo[httpMethod]) {
//         // @ts-ignore
//         pathInfo[httpMethod] = {
//           description: "This is a description",
//           content: {
//             // "application/json": {
//             //     "schema":
//             // }
//           }
//         }
//       }

//       // const eventDto = new SwaggerEndPointInformationDto(httpMethod, httpPath)
//       // listeners.forEach((fn: (entry: SwaggerEndPointInformationDto) => void) => fn(eventDto))
//     }
//   }
// }
});

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec, swaggerUiOptions));
console.log(JSON.stringify(swaggerSpec, null, 2))

//app._router.stack.filter(e => e.route)
}

private checkIsNotBuilt() {
if (this.built) {
throw new Error('Swagger Configuration is already built.')
}
}

public static swaggerMethod2 = (description: string) => (target: Object, propertyKey: string) => {
// Object.defineProperty(target, propertyKey, { description });
console.log(description);
console.log(Object);
console.log(propertyKey);
};
}


// const swaggerMethod = (description: string) => (target: Object, propertyKey: string) => {
// console.log(description);
// console.log(Object);
// console.log(propertyKey);
// };
/*
const swaggerMethod22 = (description: string) => (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
// console.log(key);
// Object.defineProperty(target, propertyKey, { description });
console.log("*********************************");
console.log(description);
console.log(Object);
console.log(propertyKey);
return descriptor;
};
*/
function swaggerMethod(description: string) {
return function (
target: Object,
key: string | symbol,
descriptor: PropertyDescriptor
) {
return descriptor;
};
}

export { SwaggerConfig, swaggerMethod, SwaggerEndPointInformationDto };

當我嘗試重構為：

const swaggerSpec = {
  swaggerDefinition: {}
}

我從 TypeScript 收到以下投訴：

類成員不能有 'const' 關鍵字

另外，申請時：

* security
*   - Authorization: []

這個 yaml 檔案中的位置：

/**
* @openapi
* /api/v2/patients:
*   post:
*     tags: [Patients]
*     description: to create a new patient.
*     requestBody:
*       required: true
*       content:
*         application/json:
*           schema:
*             type: object
*             $ref: '#/components/schemas/NewPatientDto'
*     responses:
*       201:
*         description: Creates a new patient.
*         content:
*           application/json:
*             schema:
*             $ref: '#/components/schemas/NewUserDto'
*       415:
*         description: Only 'application/json'. incoming content is supported..
*         content:
*           application/json:
*             schema:
*             $ref: '#/components/schemas/BaseError415Dto'
*       500:
*         description: A server error. The returned object contains the exact nature of the error.
*         content:
*           application/json:
*             schema:
*             $ref: '#/components/schemas/BaseError500Dto'
*/
this.app.post(p().api.v2.patients.$url, [
authMiddleware.verifyJWT,
patientsMiddleware.createPatientContext,
patientsMiddleware.validateAndBuildNewPatientDto,
patientsMiddleware.validateSamePatientDoesNotExist,
patientsController.createPatient
])

uj5u.com熱心網友回復：

我不確定你的實作，但根據 openapi 和我的實作，這對我有用，

您可以在 securitySchemes 的定義 > 組件中添加授權，

const swaggerSpec = {
    definition: {
        openapi: '3.0.3',
        info: {
            title: packageJson.name,
            version: packageJson.version
        },
        components: {
            securitySchemes: {
                Authorization: {
                    type: "http",
                    scheme: "bearer",
                    bearerFormat: "JWT",
                    value: "Bearer <JWT token here>"
                }
            }
        }
    },
    apis: [
        './dist/**/*.js'
    ]
};

根據您的實施用途，

const swaggerUiOptions = {
  explorer: true
};

app.use('/api-docs', swaggerUi.serve, swaggerUI.setup(swaggerSpec, swaggerUiOptions));

還有一件事，特別是api的注釋傳遞，授權的安全密鑰，

/**
* @openapi
* /api/v2/patients:
*   post:
*     security:
*       - Authorization: []
*     tags: [Patients]
*     description: to create a new patient.
....

它看起來：

每個 api 都有鎖定圖示：

點擊后：

嘗試更新openapi版本至少3.0.3！

標籤：

上一篇：如何在Ajax中將按鈕值作為變數傳遞？

下一篇：從字串陣列生成expressjs路由？