Question

我目前正在学习AngularFire身份验证，但已经走到了一堵砖墙。我试图弄清楚如何以所有控制器和可绑定方式访问的方式监视身份验证状态。

例如，如果用户登录或注销，则id喜欢更新指示该状态的段落标记。我也希望在用户登录或退出之前最初可以使用该状态。

这是我正在使用的代码。基本上，如果我可以在AuthController和名为＆＃34; loggedIn＆＃34;的视图之间绑定一个属性。或者当认证状态改变时更新的那种效果，这将是理想的。

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;
    }
]);

Answer 1

我已将其作为根范围（$ rootscope）的属性实现。我承认这很糟糕，我相信使用选择性共享对象有更优雅的选择。但是使用$ rootscope是一种将原始对象从身份验证模块共享到所有视图的简单方法，这样所有视图都可以立即将其用作本机属性，而无需经常包含它，调用函数或实现自己的广播侦听器

$rootScope.isLoggedIn = true;

您可以在module.run（）方法中对其进行初始化，或者只是假设它将为false，直到通过登录设置为止。

authModule.run(["$rootScope", function ($rootScope) {
    $rootScope.isLoggedIn = false;
};

由于继承了scope属性，因此所有视图都可以将isLoggedIn称为当前作用域中的属性：

<li ng-show="isLoggedIn">
    <a href="/#/profile">My Profile</a>
</li>
<li ng-show="!isLoggedIn">
    <a href="/#/login">Log In</a>
</li>

我修改了您的Auth工厂以包含$ rootscope并在身份验证完成时将isLoggedIn设置为根作用域属性。当用户的令牌过期时，您需要添加一种清除此属性的方法。

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;
    }
]);

您可能希望将$ rootscope属性扩展为包含用户名和其他属性的对象。

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

Answer 2

https://github.com/marcusnielsen/mn-tournament/blob/master/client/components/mn-authentication/repository.js

上述文件内容是否可用于角度工厂功能以提供您所需的内容？

当我在计算机而不是手机上时，我可以详细说明代码是否正确。

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

2 个答案: