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

Posted

技术标签:

【中文标题】在哪里存储身份验证令牌(前端)以及如何将其放入多个端点的 http 标头中?【英文标题】:Where to store auth token (frontend) and how to put it in http headers of multiple endpoints? 【发布时间】:2018-12-22 06:50:18 【问题描述】:

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

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


所以我的问题是

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

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

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

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

【问题讨论】:

尝试将令牌存储在会话存储中:sessionStorage.setItem('token', value); 并使用以下方法检索它:sessionStorage.getItem('token'); localStorage 呢? localStorage 不是更适合这个吗? 如果您希望在关闭浏览器/窗口后仍保留这些值,您可以使用localStorage 【参考方案1】:

在浏览器中存储令牌的三种方式:

    LocalStorage - 存储没有过期日期的数据,无法从后端访问。 SessionStorage - 在浏览器/标签打开之前存储数据,后端无法访问。 Cookie - 存储数据,过期时间可单独设置,随后续请求自动发送到服务器。

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

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

您可以从 LocalStorageSessionStorage 中进行选择,但是如果您希望您的用户在下次打开页面时登录 - 我会选择 本地存储

然后需要手动将其添加到每个 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

【讨论】:

【参考方案2】:

您可以使用本地存储并使用拦截器将令牌附加到单个位置。 堆栈溢出也有类似的问题。 refer here

【讨论】:

以上是关于在哪里存储身份验证令牌(前端)以及如何将其放入多个端点的 http 标头中?的主要内容,如果未能解决你的问题,请参考以下文章

在 RESTful API 中存储身份验证令牌的位置?

如何在 vue 中存储、管理 REST API JWT 身份验证令牌?

Symfony 在哪里存储和获取不记名令牌并做出反应?

如何正确地将身份验证令牌放在 GET 请求的标头中

如何在 api 请求标头中插入 api 身份验证所需的 jwt 令牌?

我应该在哪里存储“非单页”前端应用程序的 JSON Web 令牌