背景
之前在为框架集成knife4j接口调试查看工具,使用了一段时间,使用体验上比较繁琐,因为接口都需要token,所以每次都要去f12查看token复制再创建全局参数,可能我只需要测试一个接口但是步骤少不了,针对此问题框架做了一些优化
设计分析
框架后端针对系统管理员增加一个根据用户直接生成token的接口,将获取到的token通过js方式直接附加到knife4j的全局参数中,这样就只需要点击获取token按钮我们就可以直接进行任意接口的调试工作,通过f12分析发现,knife4j的全局参数变量是存储在浏览器数据库IndexedDB中,数据表为keyvaluepairs,对应的数据行key为Knife4jOfficeParameter
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsQTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yN5MTM1YWM5MWMzM2N2IDZyYzXxUDNyUTM2EzLcdDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
进一步分析字段名称为SwaggerBootstrapUiInstance68c7b0eebe75b10d20003678a43730cb,存储值就是我们添加的全局参数设置的数组列表,字段名是由SwaggerBootstrapUiInstance+编码命名的,所以我们只要搞定编码的生成就可以自己通过js赋值了
因为knife4j集成的doc.html页面是由vue打包生成的,js做过编译处理,所以源码我们需要具体的vue工程中查看,经过分析查找SwaggerBootstrapUiInstance关键字
代码路径:knife4j/knife4j-vue/src/core/Knife4jAsync.js
生成规则:生成的编码由name(分组对象)+location(url地址)+version(版本号)生成的字符串md5后的值
代码实现
- 获取所有资源
function initResourceInfo() {
$.get(resourceUrl, function(data, status) {
data.forEach(element => {
pageData.resourceMap[element.name] = element;
});
});
}
- 设置全局参数
function refreshKnife4jConfig(token) {
var selectApiName = window.knife4jFrame.contentWindow.document.getElementsByClassName("ant-select-selection-selected-value")[0].innerText;
var resource = pageData.resourceMap[selectApiName];
if ('indexedDB' in window) {
var req = indexedDB.open("localforage");
req.onupgradeneeded = function(event) {
}
req.onsuccess = function(event) {
console.log('数据库开启成功');
var db = event.target.result;
var table = db.transaction(['keyvaluepairs'], 'readwrite').objectStore('keyvaluepairs')
var key = resource.name + resource.location + resource.swaggerVersion;
var id = hpMD5(key).toLowerCase();
var configData = {}
configData["SwaggerBootstrapUiInstance" + id] = [
{
in: "header",
name: "token",
pkid: "tokenheader",
value: token
},
{
in: "header",
name: "Content-Type",
pkid: "Content-Typeheader",
value: "application/json"
}, ]
table.put(configData, "Knife4jOfficeParameter");
}
req.onerror = function() {
console.log("数据库开启出错");
}
} else {
console.log('你的浏览器不支持IndexedDB');
}
}