javascript - Where to store auth token (frontend) and how to put it in http headers of multiple endpoints? - Stack Overflow

admin管理员组

文章数量:1254845

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

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. 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?
   

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

$.ajax({
  url: "",
  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?

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

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. 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?
   

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

$.ajax({
  url: "https://www.something./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?

• javascript
• jquery
• django
• rest
• django-rest-framework

Share Improve this question Follow asked Jul 13, 2018 at 21:00 GilgameshGilgamesh 17322 gold badges22 silver badges1010 bronze badges 3

• Try storing the token in session storage: sessionStorage.setItem('token', value); And retrieve it using: sessionStorage.getItem('token'); – Kaushik Commented Jul 13, 2018 at 21:33
• What about the localStorage? Wouldn't localStorage be more suitable for this? – Gilgamesh Commented Jul 13, 2018 at 21:46
• 1 If you want ti retain those value even after the browser/window is closed, you can use localStorage – Kaushik Commented Jul 18, 2018 at 21:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

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

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.

More here: https://scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie

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

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.

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./random").done(function(data) {
  console.log(data) 
})

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

You can use Local-storage and use interceptor for attaching the token in single place. There is a similar question on stack overflow. refer here

本文标签：