Swagger 调试，我不想再复制粘贴token啦~

作为后端开发，进行Web Api 调试，除了使用 Postman, Apifox 等 Web Api 调试工具之外，我想使用Swagger进行调试应该是更方便，更常用的方式了吧。

那么在需要 token 授权的情况下，每次调试都需要调用一下登录API, 然后复制返回的 token, 再粘贴到上图的文本框里，点一下Authorize按钮，是不是很麻烦呢？

我的懒病犯了，我真的不想再复制粘贴token啦~

要是可以只要调用一下登录接口，返回的token就自动添加进去，自动授权，那该多好啊~

Let's go!

第一步：添加 custom.js 文件

1. 在 webapi 的项目中添加wwwroot文件夹；
2. 新建custom.js文件到wwwroot/swagger-ui/目录下，目录没有自己建，当然js文件名自己随便取；
3. 编辑custom.js文件内容：

console.log("Custom JS has been loaded and executed.");  
 
const originalFetch = window.fetch;  
  
window.fetch = function(...args) {  
    const [resource, config] = args;  
  
    return originalFetch.apply(this, args).then(response => {  
        // 检查请求的 URL        
        const requestUrl = new URL(response.url, window.location.origin).pathname;  
        if (requestUrl.endsWith("/login")) {  
            // 克隆响应以便读取  
            response.clone().json().then(data => {  
                const token = data.result.token;  
                if (token) {  
                    console.log("Token received via fetch override:", token);  
                    authorizeSwagger(token);  
                } else {  
                    console.warn("Token not found in login response.");  
                }            
            }).catch(err => {  
	            console.error("Failed to parse login response:", err);  
            });        
        }        
        return response;  
    });
}
  
// 定义授权函数  
function authorizeSwagger(token) {  
    const bearerToken = 'Bearer ' + token;  
    console.log("Setting Swagger UI Authorization with token:", bearerToken);  
    if (window.ui && window.ui.authActions) {  
        window.ui.authActions.authorize({  
            Bearer: {  
                name: 'Bearer',  
                schema: {  
                    type: 'apiKey',  
                    in: 'header',  
                    name: 'Authorization',  
                    description: '',  
	            },                
	            value: bearerToken,  
	        }        
        });        
        console.log("Authorization set successfully");  
    } else {  
        console.warn("Swagger UI authActions not available yet.");  
    }
}
    

第二步：启用静态文件服务

在Program.cs 中，启用静态文件服务；

var app = builder.Build();

// 启用静态文件服务
app.UseStaticFiles();

第三步：SwaggerUI 中间件中注入 js 脚本

使用InjectJavascript的方式将上面的custom.js注入到SwaggerUI中间件中。

// 启用Swagger  
app.UseSwagger();  
app.UseSwaggerUI(options =>  
{  
    options.InjectJavascript("/swagger-ui/custom.js");  
    options.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");  
});

OK!

大家快来试试吧~