我已更改官方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>
我想實現的是:
- 列出所有的手機
- 如果用戶點擊獲取其中一個的詳細信息,檢查它們是否已通過驗證
- 如果是,請顯示電話詳細信息 - if不是,將它們重定向到登錄頁面。
- 登錄後,將其重定向到電話詳細信息視圖。
我連點掙扎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 = true
和this._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%確定如何克服這一點。對這位阿南特的任何想法?
嗯,是不是重定向到/電話/:年齡不按預期發生?如果你設置了一個pathTo,我們在這裏記住它:https://github.com/firebase/angularFire/blob/master/angularFire.js#L361當登錄成功時,我們將重定向:https://github.com/firebase /angularFire/blob/master/angularFire.js#L498 - 我會先在這兩行中加入一些調試語句。 – Anant
你好阿南特 - 謝謝你的回覆。我會嘗試進一步調試,並讓你知道我想出了什麼。我最大的問題是,在登錄後,我無法「強制」應用程序顯示電話詳細信息頁面。我必須調用router.reload(/ phones /:age)嗎? [順便說一句,我已經看到你的演示 - 請保持與angularFire的良好工作,我喜歡它。] – Tamas
你不需要強制應用程序重新加載,一旦用戶成功登錄,應調用_loggedIn函數然後調用$ location.path來重定向應用程序。看起來這個部分雖然不起作用,請將你的發現提交Github問題,以便我們可以追蹤此問題! – Anant