angularFireAuth를 올바르게 구현하는 방법은 무엇입니까?

Question

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 페이지로 사용자를 어떻게 리디렉션해야합니까?

는 사용자가 클릭하면

1. 목록의 모든 전화 : 내가 달성하고자하는 것은 이것이다

   <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은 다음과 같습니다 그 중 하나의 세부 사항을 확인하고 인증 여부를 확인하십시오.

2. 예인 경우 전화 세부 정보 표시 - if 그렇지 않으면 로그인 페이지로 리디렉션하십시오.
3. 로그인 한 후 전화 세부 정보보기로 리디렉션하십시오.

나는 점 3과 사투를 벌인거야와 아난에서 코멘트 후 4

업데이트

- 난 매우 흥미로운 것을 발견했다. angularFire.js에 몇 가지 디버그 메시지를 추가하고 당분간 위의 컨트롤러에서 authRequired를 true에서 false로 변경했습니다.

/phones로 이동하는 경우 - 예상대로 firebase에서 목록이 반환됩니다. _loggedIn() 내부 내가 디버그 문을 추가 초기화 내부 또한 사용자 개체 (반환 console.log(user) 추가 : https://github.com/firebase/angularFire/blob/master/angularFire.js#L437를 - 모두 내가 유효한 사용자가 확인을, 이미 로그인

내가 다음 항목을 클릭하면, 나는. 내가 기대하는 것을 얻으십시오 - 사용자 이름과 실제 페이지가로드됩니다 (아래 html 참조). 내가 그 페이지 (http : /// phones/#/0)를 새로 고치면 다시 올바른 페이지를 얻을 수 있고 콘솔에서도 여전히 볼 수 있습니다.

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> 

: 사용자가 여전히 여기

에 기록되어 있음을 나타내는 유효한 사용자 개체, 전화 list.html 및 전화 details.html 모두를위한 HTML이다

그리고 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을 변경하는 경우 - 및 사용자 개체를 사용할 수 있다면, 나는 페이지의 무한 루프를 얻을 수 로드 - 처음에는/login이고 자동으로/phone/0으로 리디렉션되고 다시/login으로 다시 돌아오고 이것은 브라우저가 충돌 할 때까지 발생합니다.

가 LoginCtrl에 초기화를 추가 :

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

업데이트 2

일부 추가 디버그 라인을 추가하고 나는이 해결책을 제공 한 코드 주위에 파고 후

angularFire.js에서 406 및 407 행을 주석 처리했습니다.

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 % 아니에요 이것을 극복하십시오. 이 아난 트에 대한 생각은 없습니까?

Answer 1

내가 GitHub의에 이슈 (72)를 열었습니다 :

을 초기화 함수에서 다음 두 줄을 제거 :

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

당분간 대한 임시 해결책은 angularFire.js을 수정하는 것입니다 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; 
}, 

거의 모든 것을 해결 - 유일한 문제가 될 것으로 보인다 유효한 사용자 개체가 있다면 그 (즉, 누군가/login으로 이동하면 사용자가 다른 페이지로 리디렉션되어야 함), 아무 일도 일어나지 않습니다. GitHub 문제는 곧 이에 대한 추가 정보가 있어야합니다.