When developing my AngularJS-based application, I initially utilized localStorage to save the JWT authentication token obtained from the backend. The app employed an interceptor to send this token along with every request made to the backend server. This process functioned effectively until I encountered some challenges:
An issue arose when my manager expressed concerns about utilizing
localStorageto store the username and JWT auth token since they persist in the browser even if the user does not log out intentionally. Closing the browser without logging out leaves the cache stored in localStorage.To address the first problem, I switched to using
sessionStorageto store the username and JWT auth token. However, this created further complications when users opened the app in a new tab or window by right-clicking certain links. In these instances, authentication failed because the app could not locate the JWT auth token in sessionStorage.Storing the username and JWT auth token as variables in the JavaScript code posed another issue: the data would be lost if the user refreshed the browser.
These difficulties surrounding the use of JWT authentication tokens in Angular have led me to seek better solutions. Is there a way to meet the requirement of avoiding localStorage usage while also enabling the app to maintain the same authentication JWT token across multiple tabs or windows? Thank you for any insights provided!