魔改,Spring Boot Swagger UI 记住保存Token,插入自定义脚本,开启搜索框方法

上海好程序员

已于 2022-06-02 22:40:13 修改

阅读量491

点赞数

于 2022-06-02 14:45:19 首次发布

本文链接：https://blog.csdn.net/fromfire2/article/details/125099971

版权

成长的程序员专栏收录该内容

80 篇文章 0 订阅

订阅专栏

灵感来源于 .net core webapi 使用Swagger UI 记住Token Respect

1-确保原生Swagger访问路径/xxxx/swagger-ui/可以正常访问,且有Authorize按钮

2-复制资源

source:

target:

Resources:web/swagger-plus.html

底部添加

<script src="./swagger-plus.js"></script>

3-新建资源

Resources:web/swagger-plus.js

4-添加接口,如下代码:

工具类我就不传了,自己实现吧,当伪代码看

package org.xxx.modules.common.controller;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.var;
import org.apache.http.entity.ContentType;
import org.xxx.tools.util.ResourceUtil;
import org.xxx.tools.util.StreamUtil;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Api(tags = "通用-swagger")
@RestController
@RequestMapping("swagger-ui")
public class SwaggerController {

    @ApiOperation("plus")
    @GetMapping("plus")
    public void plus(HttpServletResponse response) throws IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType(ContentType.TEXT_HTML.getMimeType());
        var responseStream = response.getOutputStream();
        var fileStream = ResourceUtil.getStream("web/swagger-plus.html");
        StreamUtil.copy(fileStream, responseStream);
    }

    @ApiOperation("swagger-plus.js")
    @GetMapping("swagger-plus.js")
    public void js(HttpServletResponse response) throws IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType(ContentType.APPLICATION_OCTET_STREAM.getMimeType());
        var responseStream = response.getOutputStream();
        var fileStream = ResourceUtil.getStream("web/swagger-plus.js");
        StreamUtil.copy(fileStream, responseStream);
    }

}

运行结果:/xxxx/swagger-ui/plus

准备工作已经做完了,接下来的工作就是写在Resources:web/swagger-plus.js中写js了

自由发挥吧!!!

案例1:记住保存Token

swagger-plus.html 加入以下标签

...
<body>
<span>默认Token:<input id="token"/>
<button id="setToken">设置</button>(如有更改,刷新后生效)</span>
...
<div id="swagger-ui"></div>

<script src="./swagger-ui-bundle.js?v=3.0.0"></script>
<script src="./swagger-ui-standalone-preset.js?v=3.0.0"></script>
<script src="./springfox.js?v=3.0.0"></script>
<script src="../jquery/jquery-1.11.3.min.js"></script>
<script src="./swagger-plus.js"></script>

</body>
...

swagger-plus.js 写入内容

var token = localStorage.getItem("token");
var inputSetToken = $("#token");
if (token != undefined && token != '')
    inputSetToken.val(token);
$("#setToken").click(function () {
    localStorage.setItem("token", inputSetToken.val());
});

function getVarsThenSetToken() {
    if (token == undefined || token == '')
        return;
    var buttonOpenAuthorize = $(".auth-wrapper button.authorize");
    if (buttonOpenAuthorize.length > 0) {
        buttonOpenAuthorize.click();
        var inputToken = $(".auth-container input");
        var buttonAuthorize = $(".auth-container button[type='submit'].authorize");
        var buttonClose = $(".auth-container button.btn-done");

        //jquery不能触发react的onChange事件， 使用Event
        //inputToken.val(token);
        //inputToken.onChange();
        var element = inputToken[0];
        var event = new Event('input', {bubbles: true});
        event.simulated = true;
        element.value = token;
        element.dispatchEvent(event);

        buttonAuthorize.click();
        buttonClose.click();

        return;
    }
    setTimeout(getVarsThenSetToken, 100);//$(document).ready();不管用,所以用这个
}

$(document).ready(function () {
    getVarsThenSetToken();
});

效果:

上海好程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
魔改,Spring Boot Swagger UI 记住保存Token,插入自定义脚本,开启搜索框方法

灵感来源于 .net core webapi 使用Swagger UI 记住Token Respectsource:target:Resources:web/swagger-plus.html 底部添加 3-新建资源Resources:web/swagger-plus.js工具类我就不传了,自己实现吧,当伪代码看运行结果:/xxxx/swagger-ui/plus准备工作已经做完了,接下来的工作就是写在Resources:web/swagger-plus.js中写js了自由发挥吧!
复制链接

扫一扫