哪里存储身份验证令牌(前端)，以及如何将其放入多个端点的HTTP标头中? [英] Where to store auth token (frontend) and how to put it in http headers of multiple endpoints?

问题描述

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

I wanted to write auth backend for both mobile and webapp, so I decided to go with the DRF (Django Rest Framework) token authentication.

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

I pretty much figured out backend via DRF documentation but regarding frontend implementation it just says "include token in the header of every http request to the API."

---

所以我的问题是

---

So my question is

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

1. When I retrieve token in AJAX call where should I store it so that upon browser refresh it doesn't disappear?
   (Apparently I'm not using cookies, because phones have restriction on cookie uses )
2. How to insert the auth token in the http headers of multiple API endpoints?
   

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

With the help of Stackoverflow I figured out how to insert auth token in a single http header.

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

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

I was wondering If I have to write this piece of code for every endpoints or is there a way cover all the endpoints without being redundant?

推荐答案

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

There are three ways how to store a token in a browser:

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

1. LocalStorage - stores data with no expiration date, no access from a backend.
2. SessionStorage - stores data until browser/tab is open, no access from a backend.
3. Cookie - stores data, expiration time can be set individually, automatically sent with subsequent requests to the server.

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

因此，唯一的 Cookie 会自动为您完成此操作，其余的所有操作-您都需要手动提供.

So, the only Cookie would do it automatically for you, all the rest - you would need to provide manually.

您可以从 LocalStorage 和 SessionStorage 中进行选择，但是如果您希望用户在下次打开页面时登录，请选择 LocalStorage .

You can choose from both LocalStorage and SessionStorage, but if you want your users to be logged in next time they open a page - I would choose a LocalStorage.

然后需要将其手动添加到每个API请求中，但是您可以创建一个帮助器函数来简化该操作:

Then it needs to be added manually to every API request, but you can create a helper function to make it easier:

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/zh-CN/docs/Web/API/Window/localStorage

More about localStorage here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

这篇关于哪里存储身份验证令牌(前端)，以及如何将其放入多个端点的HTTP标头中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！