4

angularjsアプリでルートが変更される前に認証が完了するのを待つ方法。

angularfire 簡易認証を使用しています。

私のプランカーはここにあります

example@gmail.comとexampleを認証情報として使用して、plunker をテストできます。

問題の原因はわかっています。しかし、解決方法がわかりません...

実際、認証されたユーザーが ' #/home/に移動すると、sahayiApp.run( function(){ ...})関数で条件がチェックされますif(next.authRequired && !$rootScope.user){ ... } . 実際には、認証されたユーザーはこのチェックに合格できますが、このコードは実際の認証が行われる前に実行されます.ルートが変更される前に認証する方法はありますか...

4

1 に答える 1

6

アップデート

これのほとんどは、angularFire の進行により時代遅れになっています。更新されたバージョンについては、このモジュールを確認してください: https://github.com/firebase/angularFire-seed/blob/master/app/js/module.simpleLoginTools.js

シンプルなログインで動作するように装飾ng-cloakし、いくつかの最適化されたヘルパー メソッドを提供し、最近のバージョンで動作します。

古いポスト

認証には、サーバーへの往復が必要です。SPA では通常、通常の使用時にページをリロードすることはないため、ほとんどの場合、これは不要です。

ただし、Angular をある程度理解していると解決するのは難しくありません。実際、私は最近のワークショップでディレクティブを書くための例として、この正確なシナリオを教えました. これが私が使用した要点であり、要旨を使用するサンプルアプリは次のとおりです。

GitHub リポジトリのクローンを作成しようとする場合はgit checkout step3、コースが段階的に説明されているため、その特定のタグ ( ) を取得する必要があることに注意してください。

SO 形式に準拠するため、Gist の内容は次のとおりです。最初のディレクティブ:

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>
于 2013-12-04T16:50:59.720 に答える