.net core webapi 使用Swagger UI 记住Token

实现 swagger UI 授权认证记录到localStorage里，刷新时 自动登录。

在开发阶段，要频繁的修改接口，每次修改接口刷新接口调试时，原来的token都不见了。这样很不方便。

就想办法怎么能自动记住Token? 可能 swagger ui 会自带个功能，不过我没有找到，搜索也找不到相关的解决办法。于是就自己想办法来记录这个token。

刚开始想的比较简单，使用jquery在登录时记录在localStorage里，然后在刷新后，再读出来。

思路有了，先需要解决二个问题：

1. 怎么注入js到 swagger ui 页面上；（这个还好，自带的有这个功能一会贴上代码）
2. 触发Authorize的事件；（页面是用React写的，调用他的方法比较难。需要使用Event来触发相关的事件，jquery的 trigger 触发不了React的事件）

直接上看图：

Startup.cs里注入自己的脚本到页面上

 js放在项目里 wwwroot/js/里，要开启app.UseStaticFiles();

最重要的来的，mySwagger.js里的内容

代码里有注释，我就不多解释了，有问题可以评论区讨论。

打开Swagger UI时会弹出Authorize框，一闪而过。

登录成功。

JS里是利用jquery找页面上的元素，如果你使用的swagger版本和我的不一样，有可能找不到元素，你可以自己改一下。

知识点：触发React的onChange，onClick等事件要使用Event来触发 

           var element=document.getElementById('id');

             var event3 = new Event('click', { bubbles: true });
             event3.simulated = true;
            element.dispatchEvent(event3);

附上mySwagger.js的代码

$(function () {
    //延时半秒执行，为了让自身的代码先执行完成。
    setTimeout(setTestToken, 500);

    //下面 触发click事件是自动触发这个
    //第二步 显示Authorized 框时 自动写入token
    $(".swagger-ui").on("click", ".schemes .auth-wrapper>.authorize", function () {
        setTimeout(function () {
            var _value = $(".swagger-ui .dialog-ux input").val();
            if (_value == "") {
                var token = localStorage.getItem("swagger-Authorize");
                if (token &&token != "") {
                    //使用jquery找元素比较好找。再用get(0)返回原生dom元素
                    var element = $(".swagger-ui .dialog-ux input").get(0);
                    //console.log("---", element);
                    //jquery不能触发react的onChange事件， 使用Event
                    var event = new Event('input', { bubbles: true });
                    event.simulated = true;
                    element.value = token;
                    element.dispatchEvent(event);

                    //第三步提交token 触发form.submit
                    setTimeout(function () {
                        if (isAutoToken) {//用来区别是自动的，还是手动输入的
                            isAutoToken = false;
                            var submitform = $(".swagger-ui .modal-ux .auth-container form").get(0);

                            var event2 = new Event('submit', { bubbles: true });
                            event2.simulated = true;
                            submitform.dispatchEvent(event2);

                            //第四步 关闭 Authorized框
                            var close = $(".swagger-ui .modal-ux .modal-ux-header .close-modal").get(0);
                            var event3 = new Event('click', { bubbles: true });
                            event3.simulated = true;
                            close.dispatchEvent(event3);
                        }
                    }, 100);
                }
            }
        }, 100)

    });
    $(".swagger-ui").on("click", ".modal-ux .auth-btn-wrapper>button.authorize", function () {
        var _value = $(".swagger-ui .dialog-ux input").val();
        localStorage.setItem("swagger-Authorize", _value);
    });

});
//用来分别自动和手动的变量
var isAutoToken = false;
//自动点击Authorize弹出 输入框
function setTestToken() {
    var token = localStorage.getItem("swagger-Authorize");
    if (token&&token != "") {
        isAutoToken = true; //是第一次自动显示

        //第一步 显示Authorized 框
        var authorize = $(".swagger-ui .schemes .auth-wrapper>button.authorize").get(0);

        var event1 = new Event('click', { bubbles: true });
        event1.simulated = true;
        authorize.dispatchEvent(event1);
    };
}