个人中心
gpt4 book ai didi

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

转载 作者：撒哈拉 更新时间：2024-12-13 16:25:25 57 4
gpt4 key购买 nike

作为后端开发，进行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.

大家快来试试吧~ 。

最后此篇关于Swagger调试，我不想再复制粘贴token啦~的文章就讲到这里了,如果你想了解更多关于Swagger调试，我不想再复制粘贴token啦~的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

57 4 0
文章推荐： 让低版本gitlab焕新——如何在低版本gitlab上实现高版本API功能
文章推荐： 从CephFS到JuiceFS：同程旅游亿级文件存储平台构建之路
文章推荐： 鸿蒙NEXT开发案例：世界时间表
文章推荐： 痞子衡嵌入式：i.MXRT1170上PXP对CM7TCM进行随机地址短小数据写入操作限制
撒哈拉
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com