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
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.
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.
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.
$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()
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With