knife4j通过js动态刷新全局参数

发布时间:2022-12-24 08:30

背景

之前在为框架集成knife4j接口调试查看工具,使用了一段时间,使用体验上比较繁琐,因为接口都需要token,所以每次都要去f12查看token复制再创建全局参数,可能我只需要测试一个接口但是步骤少不了,针对此问题框架做了一些优化

设计分析

框架后端针对系统管理员增加一个根据用户直接生成token的接口,将获取到的token通过js方式直接附加到knife4j的全局参数中,这样就只需要点击获取token按钮我们就可以直接进行任意接口的调试工作,通过f12分析发现,knife4j的全局参数变量是存储在浏览器数据库IndexedDB中,数据表为keyvaluepairs,对应的数据行key为Knife4jOfficeParameter

knife4j通过js动态刷新全局参数_第1张图片

knife4j通过js动态刷新全局参数_第2张图片

进一步分析字段名称为SwaggerBootstrapUiInstance68c7b0eebe75b10d20003678a43730cb,存储值就是我们添加的全局参数设置的数组列表,字段名是由SwaggerBootstrapUiInstance+编码命名的,所以我们只要搞定编码的生成就可以自己通过js赋值了

因为knife4j集成的doc.html页面是由vue打包生成的,js做过编译处理,所以源码我们需要具体的vue工程中查看,经过分析查找SwaggerBootstrapUiInstance关键字

代码路径:knife4j/knife4j-vue/src/core/Knife4jAsync.js

生成规则:生成的编码由name(分组对象)+location(url地址)+version(版本号)生成的字符串md5后的值

knife4j通过js动态刷新全局参数_第3张图片

上述的name,location,version三个值是通过请求swagger-resources接口获取的,返回值为一个数组,根据选择的group去匹配

knife4j通过js动态刷新全局参数_第4张图片

代码实现

分析完毕后就可以进行代码操作了,其中涉及到IndexedDB的操作简单学习一下即可

  • 获取所有资源

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号