Angularjs 使用AngularFire firebaseAuth绑定身份验证状态

Angularjs 使用AngularFire firebaseAuth绑定身份验证状态,angularjs,firebase,angularfire,Angularjs,Firebase,Angularfire,我现在正在学习AngularFire认证作品,但我遇到了麻烦。我试图弄清楚如何以一种所有控制器都可以访问并且可以绑定的方式监视身份验证状态 例如,如果用户登录或注销,id将更新指示该状态的段落标记。我还希望该状态在用户登录或注销之前最初可用 这是我正在使用的代码。基本上,如果我可以在AuthController和名为“loggedIn”的视图之间绑定一个属性,或者在身份验证状态更改时更新该属性,那将是理想的 var dashApp = angular.module("dashApp", ["ng

我现在正在学习AngularFire认证作品,但我遇到了麻烦。我试图弄清楚如何以一种所有控制器都可以访问并且可以绑定的方式监视身份验证状态

例如,如果用户登录或注销,id将更新指示该状态的段落标记。我还希望该状态在用户登录或注销之前最初可用

这是我正在使用的代码。基本上,如果我可以在AuthController和名为“loggedIn”的视图之间绑定一个属性,或者在身份验证状态更改时更新该属性,那将是理想的

var dashApp = angular.module("dashApp", ["ngRoute", "ngAnimate", "firebase", "picardy.fontawesome"]);

dashApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/home', {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl'
        }).
        when('/login', {
            templateUrl: 'views/login.html',
            controller: 'AuthCtrl'
        }).
        otherwise({
            redirectTo: '/home'
        });
    }
]);

dashApp.controller('AccountCtrl',
    function($scope) {

    }
);

dashApp.controller('HomeCtrl',
    function($scope) {
    }
);

dashApp.controller('AuthCtrl', ["$scope", "Auth",
    function($scope, Auth) {
        $scope.login = function(email, password){
            Auth.login(email, password);
        };
        $scope.logout = function(){
            Auth.logout();
        };
    }
]);

dashApp.factory("Auth", ["$firebaseAuth",
    function($firebaseAuth){
        var authRef = $firebaseAuth(new Firebase("https://zmdash.firebaseio.com/"));

        var authObject = {
            login : function(email, password){
                authRef.$authWithPassword({
                    email : email,
                    password : password
                }).then(
                    function(authData){
                    }, 
                    function(errorData){
                    }
                );
            },
            logout : function(){
                authRef.$unauth();
            }
        }

        return authObject;
    }
]);

我已经在根范围($rootscope)上实现了这个属性。我承认这有点骇人听闻,我相信有更多优雅的选择使用选择性共享对象。但是使用$rootscope是一种非常简单的方法,可以将一个基本对象从身份验证模块共享到所有视图,这样所有视图都可以立即将其作为本机属性使用,而无需不断地包含它、调用函数或实现自己的广播侦听器

$rootScope.isLoggedIn = true;
您可以在module.run()方法中对其进行初始化,或者在登录设置之前假定它为false

authModule.run(["$rootScope", function ($rootScope) {
    $rootScope.isLoggedIn = false;
};
由于作用域属性是继承的,因此所有视图都可以将
isLoggedIn
作为当前作用域中的属性引用:

<li ng-show="isLoggedIn">
    <a href="/#/profile">My Profile</a>
</li>
<li ng-show="!isLoggedIn">
    <a href="/#/login">Log In</a>
</li>
您可能希望将$rootscope属性扩展为包含usernamed和其他属性的对象

在更优雅的解决方案中,您可以将此属性添加到Auth对象,并让视图将其拉入。如果在许多视图中不需要此选项,则它可能会起作用。此外,如果从$rootscope进行编码是一种更好的方式,那么您可以使用来自$rootscope的广播消息来宣布从登录到注销的转换。

上述文件内容是否可以在angular factory函数中使用,以提供您所需的内容


当我在电脑上而不是在电话上时,如果代码方向正确,我可以详细说明代码

谢谢,詹姆斯。我最终就是这么做的,但我希望在理想情况下尽可能避免弄乱rootScope。我感谢您的意见。一个更优雅的解决方案是阅读并使用此处提到的路由/解析工具。这些将为您节省大量处理auth的工作。还可以查看,它处理身份验证状态和隐藏数据的显示。
dashApp.factory("Auth", ["$firebaseAuth", "$rootscope",
    function($firebaseAuth){
        var authRef = $firebaseAuth(new Firebase("https://zmdash.firebaseio.com/"));

        var authObject = {
            login : function(email, password){
                authRef.$authWithPassword({
                    email : email,
                    password : password
                }).then(
                    function(authData){
                        $rootScope.isLoggedIn = true;
                    }, 
                    function(errorData){
                    }
                );
            },
            logout : function(){
                authRef.$unauth();
            }
        }

        return authObject;
    }
]);