angularjs: как аутентифицироваться до изменения маршрута

Question

Как дождаться завершения аутентификации до изменения маршрута в приложении angularjs.

Я использую простой аутентификационный метод angularfire.

My plunker is here

Вы можете проверить plunker с example@gmail.com и например в удостоверении.

Я знаю причину проблемы. но не знаю, как решить это ...

На самом деле, когда авторизованный пользователь переходит к '#/дома/, в sahayiApp.run (функция() {...}) функция а состояние проверено если (следующий.authRequired & &! $ rootScope.user) {...}. На самом деле Авторизованный пользователь может передать эту проверку, но этот код выполняется до наступления фактической аутентификации .. Так есть ли способ аутентификации до изменения маршрута ...

Answer 1

Update

Большая часть этого является устаревшей теперь с прогрессирование углового света. Проверьте этот модуль на обновленную версию: https://github.com/firebase/angularFire-seed/blob/master/app/js/module.simpleLoginTools.js

Он украшает ng-cloak, чтобы работать с простым входом в систему и предоставляет некоторые оптимизированные вспомогательные методы, а также работу с последними версиями.

Old Post

удостовер требует поездки туда и обратно на сервер. В SPA вы обычно не перезагружаете страницу во время нормального использования, поэтому в большинстве случаев это действительно излишне.

Однако, это не сложно решить с умеренным пониманием углового. Фактически, я преподавал этот точный сценарий в качестве примера для написания директив в недавнем семинаре. Here's the gist I used и here's an example app, который использует сущность.

Обратите внимание, что если вы попытаетесь клонировать репозиторий GitHub, вам необходимо захватить этот конкретный тег (git checkout step3), когда курс преподается в шагах.

Для соответствия формату SO, вот содержание сущности. Первая директива:

angular.module('waitForAuth', []) 

/** 
* A service that returns a promise object, which is resolved once angularFireAuth 
* is initialized (i.e. it returns login, logout, or error) 
*/ 
.service('waitForAuth', function($rootScope, $q, $timeout) { 
    var def = $q.defer(), subs = []; 
    subs.push($rootScope.$on('angularFireAuth:login', fn)); 
    subs.push($rootScope.$on('angularFireAuth:logout', fn)); 
    subs.push($rootScope.$on('angularFireAuth:error', fn)); 
    function fn() { 
     for(var i=0; i < subs.length; i++) { subs[i](); } 
     $timeout(function() { 
      // force $scope.$apply to be re-run after login resolves 
      def.resolve(); 
     }); 
    } 
    return def.promise; 
}) 

/** 
* A directive that hides the element from view until waitForAuth resolves 
*/ 
.directive('ngCloakAuth', function(waitForAuth) { 
    return { 
     restrict: 'A', 
     compile: function(el) { 
      console.log('waiting'); 
      el.addClass('hide'); 
      waitForAuth.then(function() { 
       el.removeClass('hide'); 
      }) 
     } 
    } 
}) 

/** 
* A directive that shows elements only when the given authentication state is in effect 
*/ 
.directive('ngShowAuth', function($rootScope) { 
    var loginState; 
    return { 
     restrict: 'A', 
     compile: function(el, attr) { 
      var expState = attr.ngShowAuth; 
      function fn(newState) { 
       loginState = newState; 
       el.toggleClass('hide', loginState !== expState); 
      } 
      fn(null); 
      $rootScope.$on("angularFireAuth:login", function() { fn('login') }); 
      $rootScope.$on("angularFireAuth:logout", function() { fn('logout') }); 
      $rootScope.$on("angularFireAuth:error", function() { fn('error') }); 
     } 
    } 
}); 

И некоторые примеры использования:

<style> 
    .hide { display: none; } 
</style> 

<script> 
    // include the waitForAuth module as a dependency 
    angular.module('myApp', ['waitForAuth']) 

    // you can use waitForAuth directly from your scripts 
    .controller('myController', function(waitForAuth) { 
    waitForAuth.then(function() { 
     /* do something after auth completes */ 
    }) 
    }) 
</script> 

<!-- and you can use the directives in your views --> 
<div ng-cloak-auth>Authentication has resolved.</div> 

<div ng-show-auth="login">{{user.id}} is logged in</div> 

<div ng-show-auth="logout">Logged out</div> 

<div ng-show-auth="error">An error occurred during authentication</div>