Controle de acesso e autenticação AngularJS

Oi pessoal, como provavelmente vocês encontraram algum tipo de problema em relação à autenticação AngularJS, como: “Como posso saber se o usuário está autenticado?” ou “Posso fazer com que uma página não abra se o usuário não tiver acesso a ela?”, bem, eu pensei que seria bom compartilhar minha descoberta com você.

Para fazer um usuário ser lembrado por nosso sistema, usamos um serviço que chamamos de SessionService e se parece com isto:

Serviço de Sessão

angular.module('MyApp.Services').service('SessionService', function(){
    var userIsAuthenticated = false;

    this.setUserAuthenticated = function(value){
        userIsAuthenticated = value;
    };

    this.getUserAuthenticated = function(){
        return userIsAuthenticated;
    });
});

Isso nos permitirá verificar se o usuário atual já está logado ou não (lembre-se de que ainda será necessário armazenar esses valores em um cookie ou algo semelhante para evitar que o recarregamento da página redefina os valores).

O próximo requisito é um objeto onde possamos definir quais são as rotas e quais são públicas e quais não são:

Objeto de rotas

window.routes =
{
    "/welcome": {
        templateUrl: 'partials/welcome.html', 
        controller: 'WelcomeCtrl', 
        requireLogin: false
},
    "/user-details": {
        templateUrl: 'partials/userDetails.html', 
        controller: 'UserDetailsCtrl', 
        requireLogin: true
    }
};

Observe que este objeto é muito semelhante ao objeto de rotas que normalmente usamos na “configuração” do nosso aplicativo, mas este tem “requireLogin” (e pode ter muito mais, use sua imaginação!).

Agora, a outra coisa que precisamos é um App, no qual usar o objeto de serviço e rotas anterior, algo assim:

Meu aplicativo

angular.module('MyApp', [
    'MyApp.Services'
]);

MyApp.config(['$routeProvider', function($routeProvider){

    //this loads up our routes dynamically from the previous object 
    for(var path in window.routes) {
        $routeProvider.when(path, window.routes[path]);
    }
    $routeProvider.otherwise({redirectTo: '/welcome'});

}]).run(function(){

    $rootScope.$on("$locationChangeStart", function(event, next, current) {
        for(var i in window.routes) {
            if(next.indexOf(i) != -1) {
                if(window.routes[i].requireLogin && !SessionService.getUserAuthenticated()) {
                    alert("You need to be authenticated to see this page!");
                    event.preventDefault();
                }
            }
        }
    });

});

O $ locationChangeStart , ao contrário de $ routeChangeStart, permite que você cancele a navegação antes que ela aconteça usando event.preventDefault ();

Resumo (TLDR):
Com apenas três etapas fomos capazes de criar rotas autenticadas em nosso sistema, verifique o código acima: P