Firebase を使用するように公式の AngularJS ドキュメントを変更しました (電話チュートリアル)。
これは私のアプリのルーターです:
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>
私が達成したいのはこれです：
- すべての電話を一覧表示する
- ユーザーがそれらのいずれかの詳細を取得するためにクリックした場合は、それらが認証されているかどうかを確認します
- はいの場合は、電話の詳細を表示します。そうでない場合は、ログイン ページにリダイレクトします。
- ログイン後、電話の詳細ビューにリダイレクトします。
3と4で悩んでいます。
アップデート
Anant からのコメントの後、非常に興味深いものを見つけました。angularFire.js にいくつかのデバッグ メッセージを追加し、当面の間、上記のコントローラーで authRequired を true から false に変更しました。
/phones に移動すると、期待どおりに firebase からリストが返されます。内部にユーザー オブジェクトを返すもの_loggedIn()を追加しました (また、初期化の内部にデバッグ ステートメントを追加しました: https://github.com/firebase/angularFire/blob/master/angularFire.js#L437 -- どちらも有効なユーザーであることを確認します) 、 ログイン済み。console.log(user)
次に項目をクリックすると、ユーザー名と実際のページが読み込まれます (以下の html を参照)。そのページ (http:///phones/#/0) を更新すると、正しいページが再び表示され、コンソールにはまだ有効なユーザー オブジェクトが表示され、ユーザーがまだログインしていることを示しています。
phone-list.html と phone-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 からのスニペット (現在は Firebase の一部です):
[
{
"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 を true に戻すと、ユーザー オブジェクトが使用可能な場合、ページ読み込みの無限ループが発生します。最初は /login で、次に自動的に /phone/0 にリダイレクトされ、すぐに /login に再び戻ります。これは、ブラウザがクラッシュするまで発生します。
更新 2
さらにいくつかのデバッグ行を追加し、コードをいじった後、私はこの解決策を思いつきました:
初期化を LoginCtrl に追加します。
var url = 'https://<link>.firebaseio.com/';
angularFireAuth.initialize(url, {scope: $scope});
angularFire.js で、406 行目と 407 行目をコメントアウトしました。
//this._redirectTo = null;
//this._authenticated = false;
438行目のあたりにコードを追加しました。基本的にthis._authenticated = true、and this._redirectTo = $route.current.pathTo- とthis._authenticated = falseelseステートメントを追加しました。
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。このアナントについて何か考えはありますか？