Question

我想为移动和Web应用程序编写auth后端，因此我决定采用DRF（Django Rest框架）令牌身份验证。

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

所以我的问题是

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

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

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

我想知道是否必须为每个端点编写这段代码，或者是否有一种方法可以覆盖所有端点而又没有多余？

Answer 1

有三种方法在浏览器中存储令牌：

LocalStorage -存储没有到期日期，没有后端访问权限的数据。
SessionStorage -存储数据，直到打开浏览器/选项卡为止，后端均无访问权限。
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

Answer 2

您可以使用Local-storage并使用拦截器将令牌附加到单个位置。在堆栈溢出上也有类似的问题。 refer here

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

2 个答案: