2

thinkster の AngularFire チュートリアルに従っています。この$simpleLoginサービスは廃止されたため、コードの一部を変更しました。

工場:

app.factory('Auth', function ($firebaseSimpleLogin, FIREBASE_URL, $rootScope, $location){
var ref = new Firebase(FIREBASE_URL);
var Auth = { 
    register = function(){
        //...
    },
    resolveUser = function(){
        //...
    },
    signedIn = function(){
        var authData = ref.getAuth();
        if (authData) {
            console.log("User is signed in");
            return true;
        } else {
            console.log("User is not signed in");                
            return false;
        }
    }

コントローラー:

app.controller('NavCtrl', ['$scope', '$location', 'Post', 'Auth', function ($scope, $location, Post, Auth){
    $scope.post = {url: 'http://', title: ''};

    $scope.submitPost = function (){
        Post.create($scope.post).then(function (ref){
            $location.path('/posts/' + ref.name());
            $scope.post = {url: 'http://', title: ''};
        })
    };

    $scope.signedIn = Auth.signedIn();
    $scope.logout = Auth.logout;
}]);

app.config(function($routeProvider){
$routeProvider
  .when('/', {
    templateUrl: 'views/posts.html',
    controller: 'PostsCtrl'
  })
  .when('/posts/:postId', {
    templateUrl: 'views/showpost.html',
    controller: 'PostViewCtrl'
  })
  .when('/register', {
    templateUrl: 'views/register.html',
    controller: 'AuthCtrl',
    resolve: {
        user: function(Auth){
            return Auth.signedIn();
        }
    }
  })
  .when('/login', {
    templateUrl: 'views/login.html',
    controller: 'AuthCtrl',
    resolve: {
        signedIn: function(Auth){
            return Auth.signedIn();
        }
    }
  })
  .otherwise({
    redirectTo: '/'
  });

テンプレートの関連部分:

    <ul class="nav navbar-nav navbar-right">
  <li ng-show="signedIn">
    <a ng-href="#" ng-click="logout()">Logout</a>       
  </li>
  <li ng-hide="signedIn">
    <a href="#/register">Register</a>
  </li>
  <li ng-hide="signedIn">
    <a href="#/login">Login</a>
  </li>

問題は、signedInログイン時に変数が更新されないことです。そのため、ログアウト リンクは表示されませんが、登録リンクとログイン リンクは引き続きユーザーに表示されます。

4

2 に答える 2

1

コントローラーは次のように設定signedInします。

$scope.signedIn = Auth.signedIn();

コントローラーが初期化されると、このコードが実行され、スコープ変数が一度だけ設定されます。

認証状態の監視に関する Firebaseのドキュメントを見ると、この例は、開始したと思われるもののすぐ上にあります。

ref.onAuth(function(authData) {
  if (authData) {
    // user authenticated with Firebase
    console.log("User ID: " + authData.uid + ", Provider: " + authData.provider);
  } else {
    // user is logged out
  }
});

スニペットgetAuthがユーザーが現在ログインしているかどうかを ( を使用して) チェックする場合、これは、ユーザーがログインするまで、参照されている Firebase を ( を使用してonAuth) 監視します。その時点で、スコープ内のプロパティを設定/更新し、AngularJS に変更を通知できます。

$scope.signedIn = !!ref.getAuth(); // true if the user is already logged in
ref.onAuth(function(authData) {
    $scope.signedIn = !!ref.getAuth(); 
    $scope.$apply();
});

既に AngularFire を使用している場合は$firebaseAuth、付属のサービスを使用して同じことを行うことができます: https://www.firebase.com/docs/web/libraries/angular/guide.html#section-angular-authentication

于 2014-12-10T23:23:42.993 に答える