如何正确实现 angularFireAuth？

Question

我已更改官方 AngularJS 文档以使用 Firebase（电话教程）。

这是我的应用的路由器：

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. 如果是，请显示电话详细信息 -- 如果不是，请将其重定向到登录页面。
4. 登录后，将他们重定向到手机详细信息视图。

我在第 3 点和第 4 点上苦苦挣扎。

更新

在 Anant 的 cmets 之后，我发现了一些非常有趣的东西。我在 angularFire.js 中添加了一些调试消息，暂时我在上面的控制器中将 authRequired 从 true 更改为 false。

如果导航到 /phones - 我会按预期从 firebase 返回一个列表。在_loggedIn() 中我添加了console.log(user)，它返回一个用户对象（另外，在initialise 中我添加了一个调试语句：https://github.com/firebase/angularFire/blob/master/angularFire.js#L437——两者都确认我有一个有效的用户，已经登录。

如果我然后单击一个项目，我会得到我所期望的 - 用户名和实际页面加载（请参阅下面的 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 的 sn-p（现在是 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 行附加了代码，基本上我在 else 语句中添加了this._authenticated = true和this._redirectTo = $route.current.pathTo - 以及this._authenticated = false。

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% 确定如何克服这个问题。对这个 Anant 有什么想法吗？

Answer 1

我在 GitHub 上打开了第 72 期：https://github.com/firebase/angularFire/issues/72

暂时的临时解决办法是修改angularFire.js和：

从初始化函数中删除以下两行：

this._redirectTo = null;

this._authenticated = false;

在第 438 行（var client 的声明）附近修改 angularFire.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;
},

如上所述，这几乎解决了所有问题 - 唯一的问题似乎是，如果有一个有效的用户对象（即有人登录）导航到 /login 应该将用户重定向到另一个页面，此时没有任何反应。 GitHub 问题应该很快就会有这方面的更多信息。