AngularJS (Restangular): Creating a promise block? You must use it to verify the token.

Question

I came across Restangular for calls to the recreation service. It works great and makes a promise. I need to have a call block. The reason for this is a new page reload. I am technically not registered, but I may have a token stored in a cookie. I would like to confirm this token against the recreation service. The problem is that I need to block.

If a timeout occurs or if it is not valid, I can treat the user as not authenticated.

This is the reason you want to block, because I would like to redirect them using $ location.path to the new URL, this is not a valid token.

This does not happen on a specific route, so I cannot use a resolution that blocks. This technically happens on every route - I use $ on. $ RouteChangeStart and check the internal variable obtained by LoggedIn or not, if not logging in, I check the stored token.

This happens every time the page is refreshed, but not during navigation within the application.

The affect I'm trying to get is how Gmail works.

Look forward to any insight anyone has on this.

thanks

Answer 1

Basically, you need to make sure that some kind of asynchronous action occurs before any route changes, in which case the action authenticates the user.

What you can do is use the $routeChangeStart event, which is selected to add the property to the resolve object on the route as follows:

 function authenticate() { if ( user.isAuthenticated ) { return; } // Just fake it, but in a real app this might be an ajax call or something return $timeout(function() { user.isAuthenticated = true; }, 3000); } $rootScope.$on( "$routeChangeStart", function( e, next ) { console.log( "$routeChangeStart" ); next.resolve = angular.extend( next.resolve || {}, { __authenticating__: authenticate }); }); 

Since angular will wait for any promises in the resolve object to complete before continuing, you can simply use pseudo-dependency, as in the example. Using something like this, you should be able to ensure that your user authenticates before any routes are successfully completed.

Example: http://jsfiddle.net/hLddM/

Answer 2

I think the best way to do this might be to push the user with $ location.path, you can use .then () to effectively force the wait, leaving the user on the download page.

 var currentPath = $location.path(); $location.path(loadingScreen); //Assuming you have some sort of login function for ease. Restangular.login(token).then( function(result) { $location.path(currentPath) }, function(error) { $location.path(logInScreen) } ); 

Answer 3

If you use ui-router, you can switch to another state with the same URL where you would use this Restangular.login with this, and if successful, return to the "logged in" state, otherwise go to the state "enter" in which the user must enter his username and password.

If you are not using ui-router, you can implement something similar with ng-switch .

So, upon arriving at the screen, you do this Restangular.login , and by default you display the boot page, setting the boolean value to true. Then, if this fails, you send it to the system login, otherwise you set the download to false and display the page.

In any case, I highly recommend using ui-router, it chops :)

Hope it works!