在哪里存储身份验证令牌(前端)以及如何将其放入多个端点的 http 标头中?

2024-01-11

我想为移动和 Web 应用程序编写身份验证后端,因此我决定使用 DRF(Django Rest Framework)令牌身份验证。

我几乎通过 DRF 文档弄清楚了后端,但关于前端实现,它只是说“在 API 的每个 http 请求的标头中包含令牌."


所以我的问题是

  1. 当我在 AJAX 调用中检索令牌时,我应该将其存储在哪里,以便在浏览器刷新时它不会消失?
    (显然我没有使用cookie,因为手机对cookie的使用有限制)
  2. 如何在多个 API 端点的 http 标头中插入身份验证令牌?

在 Stackoverflow 的帮助下,我弄清楚了如何在单个 http 标头中插入身份验证令牌。

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

我想知道是否必须为每个端点编写这段代码,或者是否有办法覆盖所有端点而不冗余?


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

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

更多这里:https://scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie https://scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie

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

您可以选择两者本地存储 and 会话存储,但是如果您希望用户下次打开页面时登录 - 我会选择本地存储.

然后需要手动将其添加到每个 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 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在哪里存储身份验证令牌(前端)以及如何将其放入多个端点的 http 标头中? 的相关文章

随机推荐