While developing an Angular application, I have a single page app that interacts with a JSON web service to retrieve data.
In my Angular app, a "login" simply involves exchanging a username/password for a token. This token is then sent as a header in all subsequent requests to the server for authorization. However, this system encounters issues when a user refreshes their browser window or navigates away from the "page."
Requiring users to re-enter their credentials every time they refresh the page is not ideal for user experience.
I am considering 4 potential solutions:
- Storing the token in a secure session cookie. (This is currently what I am doing, but it is only accessible on the client side and not utilized by the server.)
- Storing the token using local storage. (This could pose security risks and require manual expiration management.)
- Preventing users from refreshing the browser window using "onbeforeunload" code. (This may lead to unwanted messages asking the user if they really want to leave the page.)
- Including the token as part of the URL. (This might clutter URLs, create potential security vulnerabilities, and complicate bookmarking and token expiry processes.)
Is option 1 the optimal choice for resolving this issue? Are there better alternatives than those listed above?