1

ユーザーがログインしていることを確認しようとしています。最初はFirebase docsで説明されているように ,$scope.useを使用しましたが、単に依存関係が間違っていると思います。$scope.user.uid$scope.getCurrenUser()

コード: myApp.js https://gist.github.com/sebbe605/2b9ff7d3b798a58a3886

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

私がこれを正しく理解していれば、私が Firebase ユーザーを参照していることをプログラムが認識する方法はありません。.controller('templateCtrl',function($scope, $firebase)明確にするために、ユーザーがログインしている場合に特定のボタンを表示できるようにしたいと考えています。

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

controllers.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

何が問題なのかわかりません。ただし、何か問題があると思います：しかし、わかりません。さらに情報が必要な場合は、喜んで投稿します。

4

1 に答える 1

1

私は当初、特権アクションを処理する場合と同じ if-then-else アプローチを採用していました。しかし、Angular を使用する場合、これは最善の方法ではないことがわかりました。この if-then-else アプローチの代わりに、特権コードを分離するソリューションに問題を再構成してみてください。

ユーザーがログインしている場合に特定のボタンを表示する

したがって、元の質問は、ユーザーがログインしている場合にのみ HTML 要素を表示することでした。これは、コントローラーで次のようなものを使用すると簡単です。

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

この行は、Firebase のログイン ステータスを現在のスコープにバインドし、ビューで使用できるようにします。常にログイン状態があるため、if-then-else は必要ありません。AngularFire は、ステータスが変更されたときにビューが通知されるようにするため、認証済みユーザーの存在と不在の両方を処理するための 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);
    });
};

これらは、Angular と AngularFire について詳しく知るために書いた私の Trenches アプリ( demo ) の (簡略化された) フラグメントであることに注意してください。

于 2014-10-13T20:47:42.570 に答える