Swagger 调试，我不想再复制粘贴token啦~
作为后端开辟，举行Web Api 调试，除了使用 Postman, Apifox 等 Web Api 调试工具之外，我想使用Swagger举行调试应该是更方便，更常用的方式了吧。https://img2024.cnblogs.com/blog/665705/202412/665705-20241213155549031-1395430637.png
https://img2024.cnblogs.com/blog/665705/202412/665705-20241213155604901-165478934.png
那么在需要 token 授权的情况下，每次调试都需要调用一下登录API, 然后复制返回的 token, 再粘贴到上图的文本框里，点一下Authorize按钮，是不是很贫苦呢？
我的懒病犯了，我真的不想再复制粘贴token啦~
要是可以只要调用一下登录接口，返回的token就自动添加进去，自动授权，那该多好啊~
Let's go!
第一步：添加 custom.js 文件
[*]在 webapi 的项目中添加wwwroot文件夹；
[*]新建custom.js文件到wwwroot/swagger-ui/目录下，目录没有自己建，当然js文件名自己随便取；
[*]编辑custom.js文件内容：
console.log("Custom JS has been loaded and executed.");
const originalFetch = window.fetch;
window.fetch = function(...args) {
const = 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!
大家快来试试吧~
https://img2024.cnblogs.com/blog/665705/202412/665705-20241213155618007-774632121.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]