Knife4j dynamically refreshes global parameters through JS

background

Before, I was integrating for the framework knife4j Interface debugging viewing tool , Used for a while , The use experience is cumbersome , Because interfaces all need token, So I have to go every time f12 see token Copy and create global parameters , Maybe I only need to test one interface, but the steps are indispensable , The framework has made some optimizations for this problem

design analysis

The back-end of the framework adds a user generated interface for system administrators token The interface of , Will get token adopt js The method is directly attached to knife4j In the global parameters of , In this way, you only need to click to get token Button, we can directly debug any interface , adopt f12 Analysis found ,knife4j The global parameter variables of are stored in the browser database IndexedDB in , The data sheet is keyvaluepairs, Corresponding data row key by Knife4jOfficeParameter

Further analysis, the field name is SwaggerBootstrapUiInstance68c7b0eebe75b10d20003678a43730cb, The stored value is the array list of global parameter settings we added , The field name is defined by SwaggerBootstrapUiInstance+ Code named , So as long as we finish the generation of code, we can pass by ourselves js Assigned a value to

because knife4j Integrated doc.html Page is created by vue It's packaged ,js Compiled , So we need specific source code vue View in the project , After analysis and search SwaggerBootstrapUiInstance keyword

Code path ：knife4j/knife4j-vue/src/core/Knife4jAsync.js

Generate rules ： The generated code is generated by name（ Group objects ）+location（url Address ）+version（ Version number ） The generated string md5 After the value of

Aforementioned name,location,version The three values are by request swagger-resources Interface obtained , The return value is an array , selective group To match

Code implementation

After the analysis, you can operate the code , It involves IndexedDB It's easy to learn the operation of

• Get all the resources

    function initResourceInfo() {
    
        $.get(resourceUrl, function(data, status) {
    
            data.forEach(element => {
    
                pageData.resourceMap[element.name] = element;
            });
        });
    }

• Set global parameters

    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(' The database was opened successfully ');
                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(" Error opening database ");
            }
        } else {
    
            console.log(' Your browser does not support it IndexedDB');
        }
    }