Este documento descreve como implementar autenticação em uma aplicação AngularJS usando os módulos "login", "main" e "dashboard" e a biblioteca loadOnDemand. O documento explica a estrutura de pastas do projeto e como os controladores verificam se o usuário está logado ao mudar de rota.

1. Autenticação
com
AngularJS e
loadOnDemand
Author: Douglas Lira
douglas.lira.web@gmail.com

2. 1 – A ideia
Criar uma autenticação utilizando AngularJS e loadOnDemand, para isso criarei
três módulos “login”, “main” e “dashboard” que para acessá-los será preciso digitar um
login e senha.
2 – Ferramentas
- AngularJS - http://angularjs.org/
- loadOnDemand - https://github.com/AndyGrom/loadOnDemand
3 – Observações
- Não explicarei como fazer o backend.
- Alterei o loadOnDemand e tem um tutorial explicando isso.
4 – Mão na massa!!

3. Explicando a estrutura de pastas
Obs.: Este tutorial vai focar apenas no diretório “public”
Explicando:
- Diretório controllers, vai ficar todos os controllers que utilizaremos no AngularJS
- Diretório common, vai ficar os arquivos que será utilizado nos controllers
- Diretório lib, ficará as bibliotecas utilizadas, como AngularJS e loadOnDemand
- Diretório view, ficará os html da aplicação
- O arquivo App.js será o pontapé inicial da aplicação

4. 1 – Arquivo App.js - public/js
//URL de acesso ao servidor RESTful
SERVER_URL = "http://localhost/public/api";
$app = angular.module('App',['loadOnDemand','dependence']);
$app.config(function($routeProvider, $locationProvider, $httpProvider){
$routeProvider.
when('/',{template:'<div load-on-demand="'Dashboard'" load-view="0"></div>'}).
when('/main',{template:'<div load-on-demand="'Main'" load-view="0"></div>'}).
when('/login',{template:'<div load-on-demand="'Login'" load-view="0"></div>'}).
when('/dashboard',{template:'<div load-on-demand="'Dashboard'" load-view="0"></div>'}).
otherwise({redirectTo:'/'});
$httpProvider.responseInterceptors.push(function($q,$rootScope) {
return function(promise) {
$rootScope.hideLoader();
return promise.then(function(response) {
return(response);
}, function(response) {
$data = response.data;
$error = $data.error;
console.error($data);
if ($error && $error.text) {
alert("ERROR: " + $error.text);
} else{
if (response.status = 404) {
alert("Erro ao acessar servidor!");
} else {
alert("ERROR! Veja o log");
}
}
return $q.reject(response);
});
}
});
}).config(['$loadOnDemandProvider', function($loadOnDemandProvider) {
var modules = [{
name: 'Login',
script: 'js/controllers/LoginController.js',
template: ['view/login/main.html']
},{
name: 'Main',
script: 'js/controllers/MainController.js',
template: ['view/main/main.html']
},{
name: 'Dashboard',
script: 'js/controllers/DashboardController.js',
template: ['view/dashboard/main.html']
},{
name: 'dependence',
script: 'js/common/dependence.js'
}];
$loadOnDemandProvider.config(modules);
}]);

5. $app.run(function($rootScope, $location, SessionIdService){
$rootScope.showLoaderFlag = false;
$rootScope.showLoader=function(){
$rootScope.showLoaderFlag=true;
}
$rootScope.hideLoader=function(){
$rootScope.showLoaderFlag=false;
}
$rootScope.server = function(url){
return SERVER_URL + url;
}
$rootScope.$on("$routeChangeStart", function(event, next, current) {
if(!SessionIdService.checkLoggedIn()){
$location.path("/login");
}
});
});
$app.filter('startFrom', function() {
return function(input, start) {
if (input==null) {
return null;
}
start = +start; //parse to int
return input.slice(start);
}
});
Observe o trecho em negrito, defini que sempre ao modificar a rota verifique se o
usuário está logado. Se NÃO estiver redirecione o mesmo para “login”.

6. 2 – Arquivo DashboardController.js – public/js/controllers/
angular.module('Dashboard',['dependence']).controller('DashboardController',
function($scope,$http,$routeParams,$location) {
console.log("OK ESTÁ LOGADO!!");
});
3 – Arquivo MainController.js – public/js/controllers/
angular.module('Main',['dependence']).controller('MainController', function($scope,$http,
$routeParams,$location) {
console.log("OK ESTÁ LOGADO!!");
});
4 – Arquivo LoginController.js – public/js/controllers/
angular.module('Login',['dependence']).controller('LoginController', function($scope,
$http,$routeParams,$location,$rootScope) {
$scope.user = {email:'',password:''};
$scope.loginUser = function(user) {
$scope.resetError();
$http.post($scope.server('/auth'), user).success(function(login) {
if(login.sessionId === null) {
$scope.setError(login.status);
return;
}
$scope.user.email = '';
$scope.user.password = '';
$rootScope.SessionId = login.sessionId;
$location.path("/main");
}).error(function() {
$scope.setError('Login e/ou senha invalida');
});
}
$scope.resetError = function() {
$scope.error = false;
$scope.errorMessage = '';
}
$scope.setError = function(message) {
$scope.error = true;
$scope.errorMessage = message;
$rootScope.SessionId = '';
}
});

7. 5 – Arquivo dependence.js – public/js/common
angular.module('dependence',[]).factory('SessionIdService',
['$rootScope','$http','$location',function($rootScope,$http,$location){
var setLoggedIn=function(){
s['auth']=true;
};
var redirectHome=function(){
s={};
$location.path('/',true);
};
var s={};
return {
set: function(key,val) {
s[key]=val;
},
get: function(key) {
if(!angular.isDefined(s[key])){
return false;
}
return s[key];
},
logout: function() {
$http.get($rootScope.server('/auth')).success(function(){
s={};
window.location=window.location.origin+window.location.pathname;
});
},
checkLoggedIn: function(){
if(s['auth']) {
return true;
} else {
$http.get($rootScope.server('/auth')).success(setLoggedIn).error(redirectHome);
}
}
};
}]);
Este arquivo é o segredo da coisa, ele será utilizado em todos os módulos criados
e será o responsável em verificar se o usuário está ou não logado.

8. 5 – Arquivo main.html – public/view/dashboard/main.html
<h1>DASHBOARD</h1>
<br>
<br>
<a href="#/main">[MAIN]</a> - <a href="#/dashboard">[DASHBOARD]</a>
6 – Arquivo main.html – public/view/main/main.html
<h1>MAIN</h1>
<br>
<br>
<a href="#/main">[MAIN]</a> - <a href="#/dashboard">[DASHBOARD]</a>
7 – Arquivo main.html – public/view/login/main.html
<section id="main" ng-controller="LoginController">
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="login-container center">
<form class="login-form">
<ul class="fields-list">
<li>
<i class="icon-user" style="float: left;"></i>
<input ng-model="user.email" id="username" name="username" type="text">
</li>
<li>
<i class="icon-key"></i>
<input ng-model="user.password" id="password" name="password" type="password">
</li>
</ul>
<div class="actions">
<input class="btn btn-green btn-large login-btn" name="commit"
type="button" ng-disabled="!user.email || !user.password" ng-click="loginUser(user)"
value="Entrar">
</div>
</form>
</div>
</div>
</div>
</div>
</section>

9. 8 – Arquivo index.html – index.html
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Auth com AngularJS – By Douglas Lira</title>
<!-- JS ============================================================ -->
<script src="js/lib/jquery-1.10.2.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-resource.min.js"></script>
<script src="js/lib/loadOnDemand.js"></script>
<!-- AngularJS ====================================================== -->
<script type="text/javascript" src="js/App.js"></script>
<script type="text/javascript" src="js/common/dependence.js"></script>
</head>
<body id="body">
<div class="container" ng-view></div>
</body>
</html>
8 – Considerações finais.
Bom espero que tenham gostado. Caso tenha dúvidas acesse o grupo angularjs-
br@googlegroups.com