将应用程序身份验证添加到 Swagger UI答案

【问题标题】：Adding the application autehntication to Swagger UI将应用程序身份验证添加到 Swagger UI
【发布时间】：2018-12-13 18:56:30
【问题描述】：

我有集成 JWT 身份验证的 Spring Boot 应用程序。

为了认证，用户需要向/login发送一个带有用户名和密码的POST请求，然后他得到一个带有{"token": "BEARER SOME_TOKEN" }的JSON响应。

在我招摇的 UI 中，当我单击“试用”并执行请求时，发送的请求没有任何令牌。

问题 - 有没有办法查询登录请求并将授权令牌添加到 Swagger UI 请求？

【问题讨论】：

标签： spring-boot swagger swagger-ui

【解决方案1】：

在这种情况下，我们可以在定义 SwaggerUIBundle 时使用index.html 中的这两个拦截器来拦截令牌并将它们添加到所有请求中：

            const ui = SwaggerUIBundle({
                ...
                responseInterceptor:
                    function (response) {
                        if (response.obj.access_token) {
                            console.log(response.obj.access_token)
                            const token = response.obj.access_token;
                            localStorage.setItem("token", token)
                        }

                        return response;
                    },
                requestInterceptor:
                    function (request) {
                        request.headers.Authorization = "Bearer " + localStorage.getItem("token");
                        return request;
                }
           }

responseInterceptor 捕获响应，如果它包含字段“token”，它会将其保存在本地存储中。 requestInterceptor 使用本地存储中的值在您从 swagger-ui 进行的每个调用中添加 Authorization 标头。

此修复适用于使用 v3 的 swagger-ui：

   <script src="https://unpkg.com/swagger-ui-dist@3.12.1/swagger-ui-standalone-preset.js"></script>
   <script src="https://unpkg.com/swagger-ui-dist@3.12.1/swagger-ui-bundle.js"></script>

【讨论】：