Angular跳转外部URL时如何添加请求头？

你当前的实现逻辑存在本质问题：通过HttpClient发送带Authorization头的请求，只是在Angular内部发起了一次AJAX请求，这个请求的响应并不会关联到后续的window.location.href跳转。当你执行跳转时，浏览器会发起一个全新的GET请求访问Swagger地址，这个请求不会携带之前AJAX请求里的Authorization头，所以认证自然失败。

方案1：利用Swagger UI的access_token参数传递令牌 #

Swagger UI默认支持通过URL参数access_token接收Bearer令牌，只要后端Swagger配置开启了这个功能，就能自动将参数值填入认证头。

代码实现：

const currentUserObject = JSON.parse(sessionStorage.getItem('currentUser') || '{}');
// 构造带令牌参数的Swagger地址
const authorizedSwaggerUrl = `${this.swaggerUrl}?access_token=${currentUserObject.access_token}`;
// 在新标签页打开
window.open(authorizedSwaggerUrl, '_blank');

方案2：通过Cookie传递令牌（需后端配合） #

如果后端支持通过Cookie读取认证令牌，可以先通过AJAX请求将令牌写入Cookie，再跳转页面。这种方式需要后端配置Cookie的属性（如SameSite、HttpOnly等）确保跨域或同域下的可用性。

代码示例（前端部分）：

const currentUserObject = JSON.parse(sessionStorage.getItem('currentUser') || '{}');
// 先请求后端接口将令牌写入Cookie（需后端实现该接口）
this.http.post('/api/set-auth-cookie', { token: currentUserObject.access_token })
  .subscribe(() => {
    window.open(this.swaggerUrl, '_blank');
  });

方案3：注入脚本到Swagger页面（同域场景适用） #

如果Angular应用和Swagger服务同域，可以在新标签页加载Swagger后，通过脚本注入的方式自动设置认证头。这种方式需要确保页面加载完成后执行脚本：

const currentUserObject = JSON.parse(sessionStorage.getItem('currentUser') || '{}');
const newTab = window.open(this.swaggerUrl, '_blank');

// 监听新标签页加载完成
newTab?.addEventListener('load', () => {
  // 注入脚本设置Swagger认证
  const script = newTab.document.createElement('script');
  script.textContent = `
    // 找到Swagger UI的认证配置
    const ui = window.ui;
    if (ui) {
      ui.authActions.authorize({
        bearerAuth: { value: '${currentUserObject.access_token}' }
      });
    }
  `;
  newTab.document.body.appendChild(script);
});

• 方案1是最简便的，大多数Swagger配置默认支持，优先尝试。
• 方案2和3需要后端或同域环境的配合，根据你的实际架构选择。
• 注意令牌的安全性，避免在URL中暴露令牌（如果对安全性要求极高，优先选择方案2或3）。

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