I'm having the classic problem where the $locationChangeStart event fires multiple times. I've tried to use the preventDefault but I can't seem to master this.
Two problems - first scenario uses $location and the second uses $state:
Once user is authenticated, I redirect using $state.go('main') , however $locationChangeStart is fired again. I do not want this behavior.
With the ui-router $stateChangeStart event, I basically hit an infinite loop scenario. Meaning that, when this event fires I check for user authentication. If the user is NOT authenticated, I then redirect using $state.go('login');. This causes an infinite loop.
Here's my app.js for starters:
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives'
]).run(['$rootScope', '$state', '$location', 'userService', 'loginService', init]);
function init($rootScope, $state, $location, userService, loginService) {
$rootScope.rageSessionVars = {};
$rootScope.$state = $state;
$rootScope.isLoggedin = false; // just something to possibly use ???
$rootScope.$on('$locationChangeStart', function () {
var userToken = loginService.getUserCookie();
// check if cookie expired, then authenticate user !
if (userToken) {
if (!loginService.isUserCookieExpired(userToken)) {
if (loginService.authUser(userToken)) {
$state.go('main');
}
else {
$location.url('index.html#/?login'); // not authenticated !
}
}
}
else {
$state.go('login');
$location.url('index.html#/?login');
}
});
}
})();
I've also created a plunker for a similar scenario yesterday, and simply modified the app.js to now include the locationChangeStart event.
Online plunker here: http://plnkr.co/edit/hsSrPqFp0hpJ4A8cTsVL?p=preview
Bottom line is I'd like to hook into one of these event for a smooth user Login/Logout experience, but I always end up in a snag with these Angular events.
Thank you in advance for your expert tips.
regards,
Bob
While using angular ui router, use $stateChangeStart and $stateChangeSuccess to control actions like authentications and manual routing during state changing.
Related
So I am trying to figure out the easiest route for authentication with AngularJS and Google Plus. I have worked with angular-google-plus and it is great, spits back all my user information. I Then wanted to get back if a user is registered or not when they come to a new page or controller in my project. So I found this post which basically said the project needs to extend the api. Fine, but he implements a watcher that, when executed in my Controller works for the gapi, but when it checks for the gapi.auth it returns undefined. My console.log tells me both of them are there and are objects. Here is my controller code:
.controller('LoginController', ['$scope', '$state', '$window', '$http','$rootScope', 'GooglePlus', function ($scope, $state, $window, $http, $rootScope, GooglePlus) {
var checkGoogleReady = $rootScope.$watch(function() {
console.log(gapi);
$scope.login = function() {
GooglePlus.login().then(function (authResult) {
console.log(authResult);
GooglePlus.getUser().then(function (user) {
console.log(user);
});
}, function (err) {
console.log(err);
});
};
}])
So the stuff inside the login() function all works, returns everything I need. But outside it, it fails to get gapi.auth and never changes after that. I feel like it checks, finds gapi, then changes gapi.auth and then tries to wait for another change, never getting the gapi.auth. Here is a picture of the console:
So you can see all 3 objects actually have the auth property on them. So I am not sure why the gapi.auth is coming back undefined.
I have a project using AngularJS with ui-router. Everything working fine beside the redirect from login screen to preview state on the first load.
Default state is home - http://test/#/
For example, if user is not logged in - http://test/#/test/1000/details goes to login page (which it is supposed to do)
Then after user login, the system goes to default state "home - http://test/#/" but I want to go to http://test/#/requests/1000/details
How do I save the "http://test/#/requests/1000/details or stateName" to redirect after login?
I try using $stateChangeSuccess to save a log of states in the $rootscope but the first one (http://test/#/requests/1000/details) never gets saved.
Any ideas how to handle this?
Thanks.
You can add a 'previous' property to $state in your main-app's run method.
This is how I solved the problem:
// add ui-router variables to $rootScope. Comes handy in many cases, for example setting page title
angular.module('app').run(['$rootScope', '$state', '$stateParams', addUIRouterVars]);
function addUIRouterVars($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
// add previous state property
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState) {
$state.previous = fromState;
});
}
Let's say I have 4 routes - 2 require the user to be logged in, 2 do not. My app init looks like:
$routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'});
$routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'});
$routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'});
$routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'});
Routes /open1 and /open2 are open to all, while routes /secure1 and /secure2 require the user to be logged in and, if not, take some action, e.g. redirect to login or launch a warning. I can determine the user's state by using my Auth service and calling, e.g., Auth.isLogin(). So the result would be:
going to /open1 and /open2 always go to the template and controller declared above
if Auth.isLogin() returns true, /secure1 and /secure2 go to the above-declared template and controller
if Auth.isLogin() returns false, /secure1 and /secure2 take some other action, e.g. $location.path('/login')
I could put logic in the Secure1 and Secure2 controllers that checks, but that is repetitive and mixes up responsibilities, makes them harder to test, etc.
Is there a way that I can use the $routeProvider to declare, "check this route and this route and if not, redirect"? I was thinking of using resolve somehow, but not quite sure how to work it in (docs on resolve are not very clear, and few helpful examples).
EDIT:
based on the answers below, it appears there are three philosophies for doing this:
Using resolve to check logged in and fail the promise, and then catching the $routeChangeError event to redirect http://www.sitepoint.com/implementing-authentication-angular-applications/
Using just $routeChangeStart event to check logged in and redirect http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/
Using just resolve to check logged in and redirect http://midgetontoes.com/blog/2014/08/31/angularjs-check-user-login
The 2nd option is what the two answerers have suggested.
As in my comments above, there are 3 different paths (plus the ability to use a directive if you want to control it from within html templates). I ended up following
https://midgetontoes.com/angularjs-check-user-login/
which essentially is as follows:
$routeProvider.when('/secure', {
templateUrl: '/secure.html',
controller: 'Secure',
resolve:{
loggedIn:onlyLoggedIn
}
});
And then onlyLoggedIn:
var onlyLoggedIn = function ($location,$q,Auth) {
var deferred = $q.defer();
if (Auth.isLogin()) {
deferred.resolve();
} else {
deferred.reject();
$location.url('/login');
}
return deferred.promise;
};
Simple, works like a charm. If I ever need a directive, I will pull this piece into a service.
This blog post deals with user authentication in AngularJS using directives.
The $route service emits $routeChangeStart before a route change.
If you don't use directives, you can catch that event by calling app.run (you can place it after the code where you define the routes [app.config]). For example:
For full disclosure I use ui.router and this is an adapted code from $stateChangeStart I use in my app
var app = angular.module('app');
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'});
$routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'});
$routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'});
$routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'});
}]);
app.run(['$rootScope', '$location', 'Auth', function($rootScope, $location, Auth) {
$rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){
var logged = Auth.isLogin();
//check if the user is going to the login page
// i use ui.route so not exactly sure about this one but you get the picture
var appTo = currRoute.path.indexOf('/secure') !== -1;
if(appTo && !logged) {
event.preventDefault();
$location.path('/login');
}
});
}]);
I had the same problem and I did it this way:
var app = angular.module('myModule',["ui-bootstrap"]);
And then listen for a locationchange in the app (this will also trigger onEnter of a page)
app.run(function ($rootScope, $location, $cookieStore) {
$rootScope.$on("$locationChangeStart", function (event, next, current) {
//Here you can check whatever you want (servercall, cookie...)
});
}
I Hope this helps!
I'm using the boilerplate stack from MEAN.io and finding it quite a good starting point, however I'm having trouble mixing the different routing commands. My app is going to have a simple signin page which is public, everything else is hidden behind that. I can check if the user is authenticated no problem, but I cannot for the life of me get Angular to load the signin page from the server. I already have a signin button on my html page that calls the correct route no problem at all, I just can't do the same thing from code.
The $location.path('/signin'); code doesn't call the server because it leaves the hash in the path
My Angular controller
angular.module('tms.tweets').controller('TweetsController', ['$scope', '$routeParams',
'$location', '$resource', 'Global', 'Tweets', function ($scope, $routeParams, $location,
$resource, Global, Tweets) {
$scope.global = Global;
$scope.find = function() {
if(Global.authenticated){
console.log(Global.authenticated);
Tweets.query(function(tweets) {
console.log("Tweets at Angular Controller: " + tweets.length);
$scope.tweets = tweets;
});
}
else{
console.log("Unauthorized");
$location.path('/signin');
}
};
}]);
Found the answer to my redirect issue, I swapped $location.path for
$window.location.href = '/signin';
For my purposes calling $window.location.href = '/newpath'; from inside my controller was not working.
I've been using the following function if I need to reload within the controller:
$scope.changeRoute = function(url, forceReload) {
$scope = $scope || angular.element(document).scope();
if(forceReload || $scope.$$phase) { // that's right TWO dollar signs: $$phase
window.location = url;
} else {
$location.path(url);
$scope.$apply();
}
};
Then you would call it like this:
$scope.changeRoute('#/newpath');
I will say though that doing this should be avoided, and that adding a run phase to your app's configuration phase should be preferred. You can read more about adding a run phase to your app configuration here: http://www.angularjshub.com/examples/modules/configurationrunphases/
On first page load when app gets initialized I want to redirect the user to login page. I think the relevant part of the code is this
$rootScope.$on("$routeChangeStart", function (event, next, current) {
alert("change location");
$location.path('/login');
});
It is based on https://github.com/fnakstad/angular-client-side-auth/blob/master/app/js/app.js The problem is on page load the alert is triggered but location does not change. I have to click on a navigation item of my app and then the login action will be called and the route changes.
.run(['$rootScope', '$location', '$cookieStore', function ($rootScope,
$location, $cookieStore) {
$location.path('/login');
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$location.path('/login');
});
$rootScope.appInitialized = true;
}]);
This will work however seems redundant. And why is alert triggered but not location change?
Why does the location not changes on full page load? How to fix this?
Full code http://jsfiddle.net/qfSC3/ but fiddle does not work.
Try using the $locationChangeStart event instead
$scope.$on("$locationChangeStart", function(event){
event.preventDefault();
})
Based off this question: AngularJS - Detecting, stalling, and cancelling route changes