如何在Swagger UI中实现类似Postman的自动变量保存复用功能

Swagger UI 默认没有内置类Postman的自动变量提取能力，可以通过官方支持的拦截器扩展实现完全一致的效果，配置完成后无需手动重复输入鉴权参数。

核心实现逻辑 #

和Postman测试脚本的逻辑完全对应：拦截登录接口响应→提取accessToken/refreshToken持久化存储→后续请求自动注入存储的变量。

具体操作步骤 #

• 找到Swagger UI的初始化配置入口：如果是自行部署的Swagger UI，配置文件一般为swagger-initializer.js；如果是后端框架集成（如SpringDoc、Springfox、FastAPI内置Swagger），直接在框架对应的Swagger配置项中注入自定义脚本即可。
• 在初始化配置中添加响应拦截器，负责捕获登录接口返回值，自动存储token并同步更新Swagger UI的鉴权状态。
• 添加请求拦截器，负责在后续所有请求发出前，自动读取存储的token注入到请求头/对应参数位置。

可直接复用的实现代码 #

将以下代码合并到你的Swagger UI初始化配置中，注意根据自己的接口路径、鉴权字段格式调整对应判断逻辑：

const swaggerUi = SwaggerUIBundle({
  // 保留原有配置项（如文档地址、挂载节点、安全方案配置等）
  url: "/v3/api-docs",
  dom_id: '#swagger-ui',
  
  // 响应拦截器：自动提取存储token
  responseInterceptor: (resp) => {
    // 匹配登录接口路径，按自己的实际接口修改
    if (resp.url.endsWith("/login") && resp.ok) {
      const responseData = resp.body;
      // 存储token到浏览器本地，刷新页面不会丢失
      if (responseData.accessToken) {
        localStorage.setItem("access_token", responseData.accessToken);
      }
      if (responseData.refreshToken) {
        localStorage.setItem("refresh_token", responseData.refreshToken);
      }
      // 自动更新Swagger UI内置的鉴权输入框状态，无需手动填写
      swaggerUi.authActions.authorize({
        // 这里的key要和你配置的securityScheme名称一致，默认常用名是BearerAuth
        BearerAuth: {
          value: `Bearer ${responseData.accessToken}`,
          name: "Authorization",
          schema: { type: "http", scheme: "bearer", bearerFormat: "JWT" }
        }
      });
    }

    // 可选：自动处理token过期刷新逻辑
    if (resp.status === 401 && !resp.url.endsWith("/refresh-token")) {
      const refreshToken = localStorage.getItem("refresh_token");
      if (refreshToken) {
        // 自动调用刷新token接口，拿到新token后重发原请求
        fetch("/refresh-token", {
          method: "post",
          headers: { "Refresh-Token": refreshToken }
        }).then(res => res.json()).then(data => {
          localStorage.setItem("access_token", data.accessToken);
          // 重发原失败请求的逻辑可以按需求补全
        })
      }
    }
    return resp;
  },

  // 请求拦截器：自动给所有请求注入token
  requestInterceptor: (req) => {
    const savedAccessToken = localStorage.getItem("access_token");
    // 没有手动填Authorization头的时候，自动注入存储的token
    if (savedAccessToken && !req.headers.Authorization) {
      req.headers.Authorization = `Bearer ${savedAccessToken}`;
    }
    // 刷新token接口自动注入refresh_token
    if (req.url.endsWith("/refresh-token")) {
      const savedRefreshToken = localStorage.getItem("refresh_token");
      if (savedRefreshToken) {
        req.headers["Refresh-Token"] = savedRefreshToken;
      }
    }
    return req;
  }
})

适配不同场景的补充说明 #

• 如果是FastAPI、SpringBoot这类后端框架集成的Swagger，不需要单独修改前端文件，直接在框架配置中添加自定义JS路径，把上面的拦截器逻辑存为静态JS文件引入即可。
• 如果是访问第三方公开的Swagger文档站，不需要站点权限，直接用油猴脚本注入上述拦截器逻辑，本地就能实现自动带token的效果。
• 需要多环境隔离的话，给localStorage的key加上环境前缀即可，和Postman的环境变量能力完全对齐。

内容的提问来源于stack exchange，提问作者Yoro