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

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

那么在需要 token 授权的情况下，每次调试都需要调用一下登录API, 然后复制返回的 token, 再粘贴到上图的文本框里，点一下Authorize按钮，是不是很贫苦呢？
我的懒病犯了，我真的不想再复制粘贴token啦~
要是可以只要调用一下登录接口，返回的token就自动添加进去，自动授权，那该多好啊~
Let's go!
第一步：添加 custom.js 文件

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

1. console.log("Custom JS has been loaded and executed.");  
3. const originalFetch = window.fetch;  
4.   
5. window.fetch = function(...args) {  
6.     const [resource, config] = args;  
7.   
8.     return originalFetch.apply(this, args).then(response => {  
9.         // 检查请求的 URL        
10.         const requestUrl = new URL(response.url, window.location.origin).pathname;  
11.         if (requestUrl.endsWith("/login")) {  
12.             // 克隆响应以便读取  
13.             response.clone().json().then(data => {  
14.                 const token = data.result.token;  
15.                 if (token) {  
16.                     console.log("Token received via fetch override:", token);  
17.                     authorizeSwagger(token);  
18.                 } else {  
19.                     console.warn("Token not found in login response.");  
20.                 }            
21.             }).catch(err => {  
22.                     console.error("Failed to parse login response:", err);  
23.             });        
24.         }        
25.         return response;  
26.     });
27. }
28.   
29. // 定义授权函数  
30. function authorizeSwagger(token) {  
31.     const bearerToken = 'Bearer ' + token;  
32.     console.log("Setting Swagger UI Authorization with token:", bearerToken);  
33.     if (window.ui && window.ui.authActions) {  
34.         window.ui.authActions.authorize({  
35.             Bearer: {  
36.                 name: 'Bearer',  
37.                 schema: {  
38.                     type: 'apiKey',  
39.                     in: 'header',  
40.                     name: 'Authorization',  
41.                     description: '',  
42.                     },               
43.                     value: bearerToken,  
44.                 }        
45.         });        
46.         console.log("Authorization set successfully");  
47.     } else {  
48.         console.warn("Swagger UI authActions not available yet.");  
49.     }
50. }
51.    

复制代码

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

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

1. var app = builder.Build();
3. // 启用静态文件服务
4. app.UseStaticFiles();

复制代码

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

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

1. // 启用Swagger  
2. app.UseSwagger();  
3. app.UseSwaggerUI(options =>  
4. {  
5.     options.InjectJavascript("/swagger-ui/custom.js");  
6.     options.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");  
7. });

复制代码

OK!
大家快来试试吧~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。