0

I am working on an Angular application.

We have a web service which takes login credentials and returns an apikey if the credentials are valid.

On the client side we make an AJAX call and if the credentials are valid we are storing the API key in session storage and taking the user to home screen.

Also we have a route guard to secure all screens with authentication.

Now when we try to open a link in new tab, the user is again taken to login screen because the API key is in session storage.

We can use local storage to store the API key, but the problem here is the API key never expires but is available to all tabs.

Can anyone please suggest a better solution?

A solution which I think will work but did not try is, make a normal HTTP request is when the user clicks login, then create a session on the server side and redirect the user to home page from the servlet. In the client side, add a web service call in ngOnInit to see if the user is logged or not.

Zoe
  • 27,060
  • 21
  • 118
  • 148
Krishna Chaitanya
  • 2,533
  • 4
  • 40
  • 74
  • Isn't simplest (and most appropriate) solution to set an expiration on the apikey and to save the apikey to the local storage? How would your solution authenticate the user without login info or apikey? – SILENT Oct 10 '18 at 23:42
  • The problem with having an expiration on the apikey is that it still exists after reopening the browser. Another solution to expire the apikey is to use onbrowserunload, but this won't work in chrome(I tried). And what if the browser process is killed or browser crashes? Onbrowserunload is never called. – Krishna Chaitanya Oct 10 '18 at 23:55
  • Try sessionStorage and share the data with other tabs? https://stackoverflow.com/questions/20325763/browser-sessionstorage-share-between-tabs – SILENT Oct 11 '18 at 00:14

0 Answers0