Autenticação com AngularJS e loadOnDemand

3,569 views

Published on

Neste tutorial irei criar uma autenticação utilizando AngularJS e loadOnDemand.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,569
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Autenticação com AngularJS e loadOnDemand

  1. 1. Autenticação com AngularJS e loadOnDemand Author: Douglas Lira douglas.lira.web@gmail.com
  2. 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. 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. 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. 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. 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. 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. 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. 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

×