deitch deitch - 5 months ago 9
AngularJS Question

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

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:



The 2nd option is what the two answerers have suggested.

Answer

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

http://midgetontoes.com/blog/2014/08/31/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.