Angular js : How to authenticate before route changes

Question

如何在 angularjs 应用程序中更改路由之前等待身份验证完成。

我正在使用 Angularfire 简单例份验证。

My plunker is here

您可以使用 example@gmail.com 和 example 作为凭据来测试骗子。

我知道问题的原因。但不知道如何解决...

实际上，当经过身份验证的用户访问“#/home/”时，在 sahayiApp.run( function(){ ...}) 函数中会检查条件if(next.authRequired && !$rootScope.user){ ... } 。实际上，经过身份验证的用户可以通过此检查，但此代码在实际身份验证发生之前运行。那么有什么方法可以在路由更改之前进行身份验证...

Answer 1

更新

随着 angularFire 的发展，其中大部分内容现在已经过时了。查看此模块以获得更新版本: https://github.com/firebase/angularFire-seed/blob/master/app/js/module.simpleLoginTools.js

它装饰了 ng-cloak 以进行简单的登录，并提供了一些优化的帮助方法以及最新版本的工作。

旧帖子

身份验证需要往返服务器。在 SPA 中，您通常不会在正常使用期间重新加载页面，因此这在大多数情况下实际上是多余的。

不过，只要对 Angular 有一定的了解，解决这个问题并不难。事实上，我在最近的一次研讨会上教授了这个确切的场景作为编写指令的示例。 Here's the gist I used ，和here's an example app这使用了要点。

请注意，如果您尝试克隆 GitHub 存储库，则需要获取该特定标签 (git checkout step3)，因为类(class)是分步骤讲授的。

为了符合 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>