Single page application losing custom headers after a refresh

Question

I am building a single page web application (angularjs + python) where a user first needs to login with a username and password. After the user gets authenticated, a new custom header with a token is created and sent everytime this application makes calls to the python api.

One thing I noticed though, is that if I refresh the page (with F5 or Ctrl+F5) then the browser loses this custom header, so it is not sent anymore to the api. Is there a way to keep the custom headers even after a refresh of the page?

Answer 1

Store the token in sessionStorage or localStorage. In your application startup (config or run) look for this information and set your header.

Perhaps if your user selects "remember me" when they log-in; save the token in local storage otherwise keep it in session storage.