Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS: Understanding $rootScope.$on('$routeChangeSuccess

I am working on a login page, on success, it redirect to home page. By default I show login page this code:

app.run(function($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
      $location.url("/login");
  });
});

Then after validating the user/pass details from the backend I take the user to the home page:

$scope.login = function() {
    if ($scope.username === 'admin' && $scope.password === 'pass') {
      console.log('successful')
      $rootScope.$on('$routeChangeSuccess', function() {
          $location.url("/home")
      });
      $location.url("/blah");
    } else {
      $scope.loginError = "Invalid username/password combination";
      console.log('Login failed..')
    };
  };

The redirect doesn't seem to work if I remove the second $location.url before the else section of the if statement. It is however not using that url (/blah), it goes to home. but If url blah is removed it the redirect logic does not work.

I can't seem to understand why I have to use two $location.url(). I would appretiate if someone can help me understand how this redirect system works?

This might not be the best practice, I am open to suggestions on how to improve this, here is Plunker example

like image 239
Simo D'lo Mafuxwana Avatar asked Nov 07 '13 10:11

Simo D'lo Mafuxwana


People also ask

How to define rootScope variable in AngularJS?

All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.

How to call rootScope function in AngularJS?

You'll have to declare the $rootScope. logout function in the module's run block instead. For more information on this, read the Module Loading & Dependencies part of the angular docs. Where are you registering the $rootScope.

How to detect url change in AngularJS?

Approach: To detect route change at any moment in AngularJS this can be achieved by using $on() method. The $on() method is an event handler, the event which will handle $routeChangeSuccess which gets triggered when route/view change is done.

What is rootScope apply ()?

$scope.$apply() This function is used to execute an expression in Agular. The function expression is optional and you can directly use $apply(). This is used to run watcher for the entire scope. $rootScope.$digest()


1 Answers

All in all this is going down a wrong path IMO...

Obviously you need to lock down any resources server side as client side can always be "changed" in a simple debugger... But I guess you already know that...

Alternative routing solutions like https://github.com/dotJEM/angular-routing or https://github.com/angular-ui/ui-router IMO gives you some better handles for this, but lets just evaluate some approaches...

One would be: http://plnkr.co/edit/ZUKB1v?p=preview Although that requires you resolve the user on all routes... So.. :(... Another would be: http://plnkr.co/edit/iM9cA1?p=preview which might be a little better...

Finally, what people often seem to do is provide http interceptors that redirects to the login page when a "Unauthorized" error code is returned from the server. But this could seem to be a more advanced approach than your ready for.

like image 139
Jens Avatar answered Nov 15 '22 04:11

Jens