时间戳

首页 > 解决方案 > 使用 Fetch API 调用带有 Auth Token 的 URL

javascript - 使用 Fetch API 调用带有 Auth Token 的 URL

问题描述

我正在使用 Fetch API 使用 Baisc 身份验证登录到我的 Web 应用程序。成功登录后，服务器将令牌作为 json 对象返回。然后我使用此令牌向其他 API 端点发出请求。如果请求包含有效令牌，这些端点只会显示网页。

一切正常，但在我使用 fetch API 成功调用后，浏览器中没有显示任何内容。

如果我在 REST 客户端中调用 API 端点，它会返回似乎没问题的 html。问题似乎是浏览器应该调用 url 而不是仅仅获取 html ..

这是我的代码。我收到了“成功”-警报-所以一切似乎都正常。但是我需要浏览器将结果显示为新页面（某种直接调用带有标头中标记的 url）。

function login(event) {
  event.preventDefault();
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let url = URL + 'login';
  let headers = new Headers();
  headers.append('Authorization', 'Basic ' + btoa(username + ":" + password));
  fetch(url, {method:'GET',
          headers: headers,
         })
  .then(function(response)
  {
    if (response.ok) {
      return response.json();
    } else {
      let error = document.getElementById("login-error");
      error.innerHTML = "Username/Password incorrect.";
    }
  })
  .then(function(json)
  {
    if (typeof(json) !== "undefined") {
      startWebapp(json.token);
    }
  })
  .catch(error => console.error('Error:', error));
}

function startWebapp(token) {
  let url = URL + 'webapp/overview';
  let headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token);
  fetch(url, {method:'GET',
headers: headers,
})
.then(function(response) {
  alert("Success!");
  return response;
});
}

如果获取成功，如何实现浏览器实际使用 API 令牌调用 url 并打开它？

标签： javascriptjwtbasic-authenticationfetch-api

解决方案

对于任何寻找解决方案的人：这实际上是 JavaScript 和 fetch API 都做不到的。对我来说（最简单的）解决方案是将令牌保存在 cookie 中。然后，服务器在 cookie 中搜索令牌并将其用于身份验证/授权。这工作得很好，我不需要在每个请求上都发送令牌。

希望有帮助。

推荐阅读