1

I am almost finished with a SPA application using AngularJS and Bootstrap. So far, I got everything working as desired, except for one thing: Proper handling with the users acts on the Browser's back or refresh buttons.

All the sub-pages within the application have buttons/links to the pages the user may switch to. Still, the application should handle properly back and refresh browser buttons. I should add that there is a login process to enter the application.

Also, all the critical information is stored under $rootScope, so everything is lost when the user refreshes and, in some cases, when he acts on the back button the results are not as desirable.

I actually have two questions:

  1. What is the widely accepted standard behavior of applications like mine when browser buttons are acted on? (remember, there is a login process to begin with).

  2. How should I start tackling the implementation of this approach?

One option I was thinking, is to intercept the request, warn the user that the action will log him off, and if the user cancels, force the browser to ignore the request (not sure this is possible).

halfer
  • 19,824
  • 17
  • 99
  • 186
FDavidov
  • 3,505
  • 6
  • 23
  • 59

2 Answers2

0

Client side routing, each view in the application should have a URL. This week allow the browser buttons to work as expected, and gives your users the opportunity to link directly to a view.

The most commonly used client side router for angular is angular ui-router - https://angular-ui.github.io/ui-router

Jason
  • 15,915
  • 3
  • 48
  • 72
  • Thanks @Jason for your reply. Yes, I'm using routing. This, however, does not solve the issue of Browser's refresh button. Does it? If yes, please explain how `$rootScrope` is not being reset. – FDavidov Apr 29 '16 at 03:36
  • The page returns to the same state as when the user hits the refresh button as does $scope – Jason Apr 29 '16 at 03:45
0

What is the widely accepted standard behavior of applications like mine when browser buttons are acted on? (remember, there is a login process to begin with).

If you are using REST services,

  1. Store authentication token in your local storage or in a cookie
  2. When user refresh the page send a request to server and fetch user information
  3. If the request result in 401 then show login screen

This is one of sample applications I have done with this approach.

Low Flying Pelican
  • 5,974
  • 1
  • 32
  • 43
  • Is there a way to intercept the browser's action? (and, for instance, warn the user and redirect to login) – FDavidov Apr 29 '16 at 03:38
  • If you are referring angular $http actions, then yes, it's doable, see http://stackoverflow.com/questions/21230417/capture-http-401-with-angular-js-interceptor – Low Flying Pelican Apr 29 '16 at 04:24