AngularFireAuth nasıl düzgün uygulanır?

Question

Firebase'i (telefon rehberi) kullanmak için resmi AngularJS belgelerini değiştirdim.

Bu

benim app yönlendiricidir:

angular.module('phonecat', ['firebase']). 
config(['$routeProvider', function($routeProvider) { 
$routeProvider. 
     when('/phones', { 
     templateUrl: 'partials/phone-list.html', 
     controller: PhoneListCtrl, 
     authRequired: false, 
     pathTo: '/phones' 
     }). 
     when('/phones/:age', { 
     templateUrl: 'partials/phone-detail.html', 
     controller: PhoneDetailCtrl, 
     authRequired: true, 
     pathTo: '/phones/:phoneId' 
     }). 
     when('/login', { 
     templateUrl: 'partials/login.html', 
     controller: LoginCtrl, 
     authRequired: false, 
     pathTo: '/login' 
     }). 
     otherwise({ 
     redirectTo: '/phones' 
     }); }]); 

denetleyici nasıl göründüğünü Bu - ama muhtemelen yanlış. Giriş işlevi çağrılır, ancak ne yapacağımı bilemiyorum. Kullanıcıyı giriş sayfasından telefon-detay.html sayfasına nasıl yönlendirmeliyim?

kullanıcı tıklarsa

1. Liste tüm telefonlar: Ne elde etmek istiyorum budur

   <input type="text" name="username" ng-model="form.username"><br> 
   <input type="text" name="password" ng-model="form.password"><br> 
   <button name="login" id="login" ng-click="login()">login</button> 
   

   :

   'use strict'; 
   
   function PhoneListCtrl($scope, angularFire, angularFireAuth) { 
       var url = 'https://<link>.firebaseio.com/'; 
       var promise = angularFire(url, $scope, 'phones', []); 
       angularFireAuth.initialize(url, {scope: $scope, name: "user"}); 
   } 
   
   function PhoneDetailCtrl($scope, $routeParams, angularFire, angularFireAuth) { 
       var url = 'https://<link>.firebaseio.com/' + $routeParams.age; 
       angularFireAuth.initialize(url, {scope: $scope, path: "/login"}); 
       $scope.$on("angularFireAuth:login", function(evt, user) { 
       var promise = angularFire(url, $scope, 'phone', {}); 
       }); 
       $scope.$on("angularFireAuth:logout", function(evt) { 
       console.log("you are logged out."); 
       }); 
       $scope.$on("angularFireAuth:error", function(evt, err) { 
       console.log(err); 
       }); 
   } 
   
   function LoginCtrl($scope, angularFire, angularFireAuth) { 
       var url = 'https://<link>.firebaseio.com'; 
       $scope.form = {}; 
       $scope.login = function() { 
       console.log("called"); 
       var username = $scope.form.username; 
       var password = $scope.form.password; 
       angularFireAuth.login('password', { 
        email: username, 
        password: password, 
        rememberMe: false 
        }); 
       }; 
   } 
   

   login.html şöyle bunlardan birinin ayrıntılarını al, doğrulanmış olup olmadıklarını kontrol et

2. Evet ise, telefon bilgilerini göster - eğer değil, giriş sayfasına yönlendirin.
3. Oturum açtıktan sonra bunları telefon ayrıntılarına yönlendirin.

Ben noktaları 3 ile mücadele ediyorum ve Anant yorumlarına sonra 4.

Güncelleme

- çok ilginç bir şey buldum. AngularFire.js'ye birkaç hata ayıklama msgs ekledim ve şu an denetleyicimde true değerinden yanlış olan authRequired değerini değiştirdim.

/Telefonlara gidersek - beklendiği gibi geri dönen listeden bir liste alırım. _loggedIn() İçinde ben bir hata ayıklama ifadesi eklendi initialise içeride de bir kullanıcının nesne (döndürür console.log(user) ekledi: https://github.com/firebase/angularFire/blob/master/angularFire.js#L437 - hem ben geçerli bir kullanıcı var olduğunu teyit henüz giriş

Sonra bir öğenin üzerine tıklarsanız, ben. beklediğim şeyi al - kullanıcı adı ve asıl sayfa yükler (aşağıdaki html'ye bakın). Sayfayı yenilediğimde (http: /// telefonlar/#/0) doğru sayfayı tekrar ve konsolda görüyorum, hala görüyorum

phone-list.html 
<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"> 
     <!--Body content--> 

     <ul class="phones"> 
      <li ng-repeat="phone in phones"> 
      <a href="#/phones/{{phone.age}}">{{phone.id}}</a> 
      <p>{{phone.snippet}}</p> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 

phone-detail.html 
<span ng-show="user"> 
    {{user.email}} | <a ng-click="logout()">Logout</a> 
    you are look looking at {{ phone.name }} 
</span> 
<span ng-hide="user"> 
    login pls! 
</span> 

: kullanıcı yine İşte

kaydedilir belirten geçerli bir kullanıcı nesnesi, telefon-list.html ve telefon-details.html ikisi için HTML bulunuyor

Ve JSON'dan bir pasajı (artık Firebase parçasıdır):

[ 
{ 
    "age": 0, 
    "id": "motorola-xoom-with-wi-fi", 
    "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
    "name": "Motorola XOOM\u2122 with Wi-Fi", 
    "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." 
}, 
{ 
    "age": 1, 
    "id": "motorola-xoom", 
    "imageUrl": "img/phones/motorola-xoom.0.jpg", 
    "name": "MOTOROLA XOOM\u2122", 
    "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)." 
}...etc 

Sonra true geri authRequired değiştirirseniz - ve kullanıcı nesnesi varsa, o zaman sayfanın sonsuz bir döngüye almak yükler - önce bu/login sonra otomatik olarak yeniden yönlendirilir/telefon/0 ve hemen tekrar/tekrar giriş yapar ve bu tarayıcı çöker kadar olur.

LoginCtrl için başlangıç ​​durumuna ekleyin:

var url = 'https://<link>.firebaseio.com/'; 
angularFireAuth.initialize(url, {scope: $scope}); 

Güncelleme 2

biraz daha hata ayıklama hatlar ekleyerek ve bu çözüm ile geldim kodu ile poking sonra

angularFire.js'de, 406 ve 407:

//this._redirectTo = null; 
//this._authenticated = false; 

satırlarını yorumladım.

Kod 438 numaralı satırın sonuna eklenmiş, temel olarak this._authenticated = true ve this._redirectTo = $route.current.pathTo - yanı sıra this._authenticated = false eklenmiştir.

var client = new FirebaseSimpleLogin(this._ref, function(err, user) { 
    self._cb(err, user); 
    if (err) { 
     $rootScope.$broadcast("angularFireAuth:error", err); 
    } else if (user) { 
     this._authenticated = true; 
     this._redirectTo = $route.current.pathTo; 
     self._loggedIn(user) 
    } else { 
     this._authenticated = false; 
     self._loggedOut(); 
    } 
    }); 
    this._authClient = client; 
}, 

bu Bir kullanıcı giriş yaptığında ve ben http://<host>/#/login gidin çalışmıyor sadece senaryo - $route.current.pathTo/login eşit olacaktır ve şu anda ben nasıl emin% 100 değilim Bunu aşmak. Bu Anant hakkında bir fikrin var mı?

Answer 1

I GitHub'dan Sayı 72 açtı:

initialise işlevi aşağıdaki iki satır çıkarın:

https://github.com/firebase/angularFire/issues/72

zaman varlık için geçici bir çözüm angularFire.js değiştirmek ve etmektir this._redirectTo = null;

this._authenticated = false;

Değiştir angularF hat 438 (var client beyanı) etrafında ire.js aşağıdaki okumak için:

bu yukarıda belirtildiği gibi

var client = new FirebaseSimpleLogin(this._ref, function(err, user) { 
    self._cb(err, user); 
    if (err) { 
     $rootScope.$broadcast("angularFireAuth:error", err); 
    } else if (user) { 
     this._authenticated = true; 
     this._redirectTo = $route.current.pathTo; 
     self._loggedIn(user) 
    } else { 
     this._authenticated = false; 
     self._loggedOut(); 
    } 
    });` 
    this._authClient = client; 
}, 

hemen hemen her şeyi düzeltir - tek sorun gibi görünüyor geçerli bir kullanıcı nesnesi varsa ki (yani birisi giriş yapmıştır)/login'e gitmek, kullanıcıyı başka bir sayfaya yönlendirmelidir, şu anda hiçbir şey olmuyor. GitHub sorununun yakında bu konuda daha fazla bilgiye sahip olması gerekir.