2013-07-23 130 views
5

我已更改官方AngularJS文檔以使用Firebase(電話教程)。如何正確實現angularFireAuth?

這是我的應用程序的路由器:

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

這是控制器的樣子 - 但它可能是不正確。登錄功能被調用,但我不知道下一步該怎麼做。我應該如何將用戶從登錄頁面重定向到phone-detail.html頁面?

'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的是這樣的:

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

我想實現的是:

  1. 列出所有的手機
  2. 如果用戶點擊獲取其中一個的詳細信息,檢查它們是否已通過驗證
  3. 如果是,請顯示電話詳細信息 - if不是,將它們重定向到登錄頁面。
  4. 登錄後,將其重定向到電話詳細信息視圖。

我連點掙扎3和4

更新

從阿南特的意見之後 - 我發現了一些很有趣的。我向angularFire.js添加了一些調試信息,並且暫時我在上面的控制器中將authRequired從true更改爲false。

如果導航到/手機 - 我得到一個列表從預期的firebase返回列表。裏面_loggedIn()我加console.log(user)它返回一個用戶對象(也,內INITIALISE我添加了一個調試語句:https://github.com/firebase/angularFire/blob/master/angularFire.js#L437 - 都證實我有一個有效的用戶,已登錄

如果我再點擊一個項目,我。得到我所期望的 - 用戶名和實際的頁面加載(見下面的html)如果我刷新那個頁面(http:///phones/#/0),我再次得到正確的頁面,並且在控制檯中,我仍然看到一個有效的用戶對象,表明該用戶仍然登錄

這裏有兩個電話list.html和電話details.html的HTML:

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> 

而且從JSON片段(即現在火力地堡的一部分):

[ 
{ 
    "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 

如果我再改authRequired回真的 - 如果用戶對象是可用的,然後我得到頁的無限循環加載 - 首先它是/登錄然後它會自動重定向/電話/ 0,並立即回到/登錄,這發生,直到瀏覽器崩潰。

初始化添加到LoginCtrl:

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

更新2

增加了一些進一步的調試線,並與代碼中,我想出了這個解決方案打交道了之後

在angularFire.js中,我註釋了第406和407行:

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

在第438行附近加上了代碼,基本上我把this._authenticated = truethis._redirectTo = $route.current.pathTo - 以及this._authenticated = false加到else語句中。

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; 
}, 

其中這不起作用是當用戶登錄和我瀏覽到http://<host>/#/login唯一的方案 - 在$route.current.pathTo將等於/login,並在那一刻,我不是100%確定如何克服這一點。對這位阿南特的任何想法?

+0

嗯,是不是重定向到/電話/:年齡不按預期發生?如果你設置了一個pathTo,我們在這裏記住它:https://github.com/firebase/angularFire/blob/master/angularFire.js#L361當登錄成功時,我們將重定向:https://github.com/firebase /angularFire/blob/master/angularFire.js#L498 - 我會先在這兩行中加入一些調試語句。 – Anant

+0

你好阿南特 - 謝謝你的回覆。我會嘗試進一步調試,並讓你知道我想出了什麼。我最大的問題是,在登錄後,我無法「強制」應用程序顯示電話詳細信息頁面。我必須調用router.reload(/ phones /:age)嗎? [順便說一句,我已經看到你的演示 - 請保持與angularFire的良好工作,我喜歡它。] – Tamas

+0

你不需要強制應用程序重新加載,一旦用戶成功登錄,應調用_loggedIn函數然後調用$ location.path來重定向應用程序。看起來這個部分雖然不起作用,請將你的發現提交Github問題,以便我們可以追蹤此問題! – Anant

回答

4

我已經打開文檔72在GitHub:https://github.com/firebase/angularFire/issues/72

暫時臨時解決方案是修改angularFire.js和:

從INITIALISE函數刪除以下兩行:

this._redirectTo = null;

this._authenticated = false;

修改angularF圍繞管道438(的var client聲明)ire.js閱讀以下內容:

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; 
}, 

如上所述,這修正了近一切 - 唯一的問題似乎是,如果有一個有效的用戶對象(即有人登錄)導航到/登錄應該重定向用戶到另一個頁面,此刻沒有任何反應。 GitHub的問題應該很快就會有更多的信息。