首页 > 解决方案 > 将应用程序身份验证添加到 Swagger UI

问题描述

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

为了进行身份验证,用户需要/login使用用户名和密码发送一个 POST 请求,然后他会收到一个 JSON 响应{"token": "BEARER SOME_TOKEN" }

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

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

标签: spring-bootswaggerswagger-ui

解决方案


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

            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 标头。

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

   <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>

推荐阅读