在哪里存储身份验证令牌（前端）以及如何将它放在多个端点的 http 标头中？

Question

我想为移动端和 web 应用程序编写身份验证后端，所以我决定使用 DRF（Django Rest Framework）令牌身份验证。

我几乎通过 DRF 文档找到了后端，但关于前端实现，它只是说“在 API 的每个 http 请求的标头中包含令牌。”

---

所以我的问题是

1. 当我在 AJAX 调用中检索令牌时，我应该在哪里存储它，以便在浏览器刷新时它不会消失？
   （显然我没有使用 cookie，因为手机对 cookie 的使用有限制）
2. 如何在多个 API 端点的 http 标头中插入 auth 令牌？
   

在 Stackoverflow 的帮助下，我想出了如何在单个 http 标头中插入身份验证令牌。

$.ajax({
  url: "https://www.something.com/random",
  type: 'get',
  headers: {
    token: "t&jdd9HJKHdss7hkjjkhdshgs",
  }
});

我想知道是否必须为每个端点编写这段代码，还是有一种方法可以覆盖所有端点而不会冗余？

Answer 1

在浏览器中存储令牌的方式有以下三种：

1. LocalStorage - 存储没有到期日期的数据，无法从后端访问。
2. SessionStorage - 存储数据直到浏览器/选项卡打开，后端无法访问。
3. Cookie - 存储数据，过期时间可以单独设置，随后续请求自动发送到服务器。

更多信息：https : //scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie

所以，唯一的Cookie会自动为您完成，其余的 - 您需要手动提供。

您可以从LocalStorage和SessionStorage 中进行选择，但是如果您希望您的用户下次打开页面时登录 - 我会选择LocalStorage。

然后需要手动将其添加到每个 API 请求中，但您可以创建一个辅助函数以使其更容易：

function apiRequest(type, url) {
  return $.ajax({
    url: url,
    type: type,
    headers: {
      token: localStorage.getItem("token"),
    }
  });
}

apiRequest("get","https://www.something.com/random").done(function(data) {
  console.log(data) 
})

有关 localStorage 的更多信息，请访问：https : //developer.mozilla.org/en-US/docs/Web/API/Window/localStorage