How do I check for login or other status before launching a route in Angular with routeProvider?

Question

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.h         


        

Answer 1

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!

Answer 2

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.

Answer 3

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');
        }
    });
}]);