如何在angularjs app中路由更改之前等待身份验证完成.
我正在使用angularfire简单身份验证.
我的傻瓜在这里
您可以使用example@gmail.com和示例作为凭证来测试plunker .
我知道问题的原因.但不知道如何解决它...
实际上,当经过身份验证的用户转到' #/ home /,在sahayiApp.run(function(){...})函数中时,会检查条件是否(next.authRequired &&!$ rootScope.user){...}.实际上,经过身份验证的用户可以通过此检查,但此代码在实际身份验证发生之前运行.那么在路由更改之前是否有任何方法进行身份验证...
更新
随着angularFire的发展,现在大部分已经过时了.查看此模块以获取更新版本:https: //github.com/firebase/angularFire-seed/blob/master/app/js/module.simpleLoginTools.js
它装饰ng-cloak
使用简单的登录,并提供一些优化的帮助方法以及使用最新版本.
老邮政
身份验证需要往返服务器.在SPA中,您通常不会在正常使用期间重新加载页面,因此在大多数情况下这实际上是多余的.
然而,通过对Angular的适度理解来解决并不困难.事实上,我教这个确切的场景作为在最近的研讨会上编写指令的一个例子.这是我使用的要点,这是一个使用要点的示例应用程序.
请注意,如果您尝试克隆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>