angular 集成 swaggerui

效果預覽圖(這個是嵌入菜單裏面的)：

官方api: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md

官方示例：https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html

json文件： http://editor.swagger.io/#   

代碼：                                                                                                                                                                                                       先引入：npm i swagger-ui  和  npm i swagger-ui-dist ---》支持swagger   |  npm i path --->打包需要，是absolutePath.js的依賴

       然後需要在文件裏面配置相關css引用路徑

TS:

const SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle;
const token = session.getItem('token');
const ui = SwaggerUIBundle({
    // url: 'swagger.json', 
    urls: [
        {url: 'swagger.json', name: 'test1'}
    ],
    dom_id: '#swaggerUI',
    supportedSubmitMethods: [], // 不可以 try it out
    deepLinking: false,   // 去掉深層鏈接，怎麼try it out 都是一級路徑
    validatorUrl: null,  // 去掉認證鏈接，也就是最下面會有一個綠色的圖片的東東
    filter: true,   // 顯示查詢框框
    showRequestHeaders: true, 
    showMutatedRequest: true,  // 啓用攔截器的返回
    // 請求攔截器
    requestInterceptor: (request) => {
        // 因爲我的接口的host不對，所以需要在這裏攔截請求，重新拼接請求路徑
        const url = request.url; 
        if (!url.includes('swagger')) {
            const hostBefore = url.split('/');
            console.log(hostBefore ,  '拿到host並改變' );
            url_ = '新請求路徑' ;
            request.url = url_;
        }
        request.headers.Authorization = token; // 請求頭添加token
        return request;
    },
    responseInterceptor: (response) => {
        return response;
    },
    presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset,
    ],
    plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: 'StandaloneLayout',
});

HTML:

<div id="swaggerUI"></div>