javascript - AngularJS 从 Controller 调用 Firebase uid

Question

我正在尝试验证用户是否已登录。最初我选择了 $scope.use、$scope.user.uid、$scope。 getCurrenUser() 如 Firebase 文档中所述，但我认为我只是依赖项错误。

代码:myApp.js https://gist.github.com/sebbe605/2b9ff7d3b798a58a3886

firebase.js https://gist.github.com/sebbe605/f9e7b9a75590b3938524

如果我理解正确的话，程序就无法知道我指的是 Firebase 用户。为了澄清我希望 .controller('templateCtrl',function($scope, $firebase) 能够在用户登录时显示某个按钮。

--更新1--所以，我已经更新了我的文件，据我所知，这应该可行。之前的代码如上面的git，以增强困惑度。

myApp.js

    angular.module('myApp', [
    'ngRoute',
    'firebase'
])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/template',
            {
                templateUrl:'partials/template.html', controller:'templateCtrl'
            });
        $routeProvider
            .when('/login',
            {
                templateUrl:'partials/login.html', controller:'signupCtrl'
            });
        $routeProvider
            .when('/signup',
            {
                templateUrl:'partials/signup.html', controller:'signupCtrl'
            });
        $routeProvider
            .when('/user',
            {
                templateUrl:'partials/user.html', controller:'userCtrl'
            });
        $routeProvider
            .otherwise('/template');
    }])

Controller .js

'use strict';
angular.module('myApp').controller('signupCtrl', function($scope, $http, angularFire, angularFireAuth){
    $scope.loginBusy = false;
    $scope.userData = $scope.userData || {};

    var ref = new Firebase('https://boostme.firebaseio.com/');
    angularFireAuth.initialize(ref, {scope: $scope, name: 'user'});

    /*//////////////LOGIN - LOGOUT - REGISTER////////////////////*/

    $scope.loginEmailText = "Email"
    $scope.loginPasswordText = "Password"

    $scope.login = function() {
        $scope.loginMessage = "";
        if ((angular.isDefined($scope.loginEmail) && $scope.loginEmail != "") && (angular.isDefined($scope.loginPassword) && $scope.loginPassword != "")) {
            $scope.loginBusy = true;
            angularFireAuth.login('password', {
                email: $scope.loginEmail,
                password: $scope.loginPassword
            });
        } else {
            $scope.loginPassword = ""
            $scope.loginPasswordText = "Incorrect email or password"
        }
    };

    $scope.logout = function() {
        $scope.loginBusy = true;
        $scope.loginMessage = "";
        $scope.greeting = "";
        $scope.disassociateUserData();
        $scope.userData = {};
        angularFireAuth.logout();
    };

    $scope.emailText = "Email"
    $scope.passwordText = "Password"
    $scope.confirmPasswordText = "Confirm Password"

    $scope.register = function() {
        $scope.loginMessage = "";
        if ((angular.isDefined($scope.email) && $scope.email != "") && (angular.isDefined($scope.password0) && $scope.password0 != "" && $scope.password0 == $scope.password1)) {
            $scope.loginBusy = true;
            angularFireAuth.createUser($scope.email, $scope.password0, function(err, user) {
                if (user) {
                    console.log('New User Registered');
                }
                $scope.loginBusy = false;
            });
        } else  {
            $scope.password0 =""
            $scope.password1 =""
            $scope.passwordText = "Password Not Matching"
            $scope.confirmPasswordText = "Password Not Matching"
        }
    };

    $scope.$on('angularFireAuth:login', function(evt, user) {
        $scope.loginBusy = false;
        $scope.user = user;
        console.log("User is Logged In");
        angularFire(ref.child('users/' + $scope.user.id), $scope, 'userData').then(function(disassociate) {
            $scope.userData.name = $scope.userData.name || {};
            if (!$scope.userData.name.first) {
                $scope.greeting = "Hello!";
            } else {
                $scope.greeting = "Hello, " + $scope.userData.name.first + "!";
            }
            $scope.disassociateUserData = function() {
                disassociate();
            };
        });
    });

    $scope.$on('angularFireAuth:logout', function(evt) {
        $scope.loginBusy = false;
        $scope.user = {};
        console.log('User is Logged Out');
    });

    $scope.$on('angularFireAuth:error', function(evt, err) {
        $scope.greeting = "";
        $scope.loginBusy = false;
        $scope.loginMessage = "";
        console.log('Error: ' + err.code);
        switch(err.code) {
            case 'EMAIL_TAKEN':
                $scope.loginMessage = "That email address is already registered!";
                break;
            case 'INVALID_PASSWORD':
                $scope.loginMessage = "Invalid username + password";
        }
    });
})

输出:

Error: [$injector:unpr] Unknown provider: angularFireProvider <- angularFire
http://errors.angularjs.org/1.3.0-rc.3/$injector/unpr?p0=angularFireProvider%20%3C-%20angularFire
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:80:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3938:19
    at Object.getService [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3943:45
    at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
    at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4103:13)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4123:23)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7771:28
    at link (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js:938:26)
    at invokeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7549:9) <div ng-view="" class="ng-scope">
  (anonymous function)  angular.js:10683
  (anonymous function)  angular.js:7858
  invokeLinkFn  angular.js:7551
  nodeLinkFn    angular.js:7069
  compositeLinkFn   angular.js:6441
  publicLinkFn  angular.js:6320
  boundTranscludeFn angular.js:6461
  controllersBoundTransclude    angular.js:7096
  update    angular-route.js:896
  Scope.$broadcast  angular.js:13751
  (anonymous function)  angular-route.js:579
  processQueue  angular.js:12234
  (anonymous function)  angular.js:12250
  Scope.$eval   angular.js:13436
  Scope.$digest angular.js:13248
  Scope.$apply  angular.js:13540
  done  angular.js:8884
  completeRequest   angular.js:9099
  xhr.onreadystatechange    angular.js:9038

我不知道问题出在哪里。不过我认为有问题:但我不能说。如果需要更多信息，我很乐意发布。

Answer 1

我最初采用与处理特权操作相同的 if-then-else 方法。但事实证明，这并不是使用 Angular 时的最佳方法。不要采用这种 if-then-else 方法，而是尝试将问题重新构建为隔离特权代码的解决方案。

如果用户登录则显示某个按钮

因此，您最初的问题是仅在用户登录时显示 HTML 元素，这在 Controller 中使用类似的内容很容易:

$scope.auth = $firebaseSimpleLogin(new Firebase(FBURL));

此行将 Firebase 登录状态绑定(bind)到当前范围，使其可供 View 使用。不需要 if-then-else，因为始终存在登录状态。 AngularFire 确保当状态发生变化时 View 会收到通知，因此我们所要做的就是确保我们有 HTML 标记来处理经过身份验证的用户的存在和不存在:

<div ng-controller="TrenchesCtrl" class='auth'>
    <div ng-show="auth.user">
        <p>You are logged in as <i class='fa fa-{{auth.user.provider}}'></i> {{auth.user.displayName}}</p>
        <button ng-click="auth.$logout()">Logout</button>
    </div>
    <div ng-hide="auth.user">
        <p>Welcome, please log in.</p>
        <button ng-click="auth.$login('twitter')">Login with <i class='fa fa-twitter'> Twitter</i></button>
        <button ng-click="auth.$login('github')">Login with <i class='fa fa-github'> GitHub</i></button>
    </div>
</div>

看看它读起来像 if-then-else 吗？但是，如果我没有编写代码来尝试检测用户是否登录。这一切都是由 AngularJS 和 AngularFire 声明性处理的。

仅在用户登录时执行操作

当您确实需要执行特权操作时，我发现最简单的方法是隔离代码，如下所示:

function updateCard(id, update) {
    var auth = $firebaseSimpleLogin(new Firebase(FBURL));
    auth.$getCurrentUser().then(function(user) {
        update.owned_by = user.username;
        var sync = $firebase(ref.child('cards').child(id));
        sync.$update(update);
    });
};

请注意，这些是来自 my Trenches app 的(简化的)片段。 ( demo )，我写这篇文章是为了了解有关 Angular 和 AngularFire 的更多信息。