angularfire cannot read property facebook - how do i keep using authData throughout app

问题

I´m working on an android game using ionic framework and firebase.

My plan is to let users login using facebook login with firebase, after this i want to save the game data to the users database key.

The first part is working. the script makes an database array based on the users facebook details. but the problem is after this is made, i cant seem to let angular change any database data. It seems like the authData is stuck in the login function...

Is there a way to keep the authdata for use in different controllers and functions?

app.factory("Auth", function($firebaseAuth) {
    var FIREB = new Firebase("https://name.firebaseio.com");
    return $firebaseAuth(FIREB);
});

app.controller('HomeScreen', function($scope,  Auth, $firebaseArray) {
    Auth.$onAuth(function(authData){
        $scope.authData = authData;
    });
    var users = new Firebase("https://name.firebaseio.com/users/");
    // create a synchronized array
    $scope.users = $firebaseArray(users);
    $scope.facebooklogin = function() {

        Auth.$authWithOAuthPopup("facebook").then(function(authData){

            users.child(authData.facebook.cachedUserProfile.id).set({
                Username: authData.facebook.displayName,
                Id: authData.facebook.cachedUserProfile.id,
                Gender: authData.facebook.cachedUserProfile.gender,
                Email: authData.facebook.email,
                level: "1"
            });

        }).catch(function(error){

        });
    }
    $scope.facebooklogout = function() {
        Auth.$unauth();
    }
    $scope.changeLVL = function(authData) {
        users.child(authData.facebook.cachedUserProfile.id).set({
            level: "2"
        });
    }


});

And this is the datastructure it creates in firebase

 users
   998995300163718
     Email: "Name@email.com"
     Gender: "male"
     Id:  "998995300163718"
     Username: "name lastname" 
     level: "1"

and after trying to edit i get this error... (using the changelevel function)

TypeError: Cannot read property 'facebook' of undefined
    at Scope.$scope.changeLVL (http://localhost:8100/js/controllers.js:35:23)
    at fn (eval at <anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21977:15), <anonymous>:4:218)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:57606:9
    at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24678:28)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24777:23)
    at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:57605:13)
    at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12103:21)
    at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2870:7)
    at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2859:3)
    at HTMLDocument.tapMouseUp (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2932:5)

回答1:

The main issue is you're relying on the cachedUserProfile.gender property to exist. This isn't guaranteed to be there for every user. You'll need to find a fallback to avoid an error.

Let's simplify by injecting the user via the resolve() method in the router. Don't mind the structure of the code, it's from the Angular Styleguide (my preferred way of writing Angular apps).

angular.module("app", ["firebase"])
  .config(ApplicationConfig)
  .factory("Auth", Auth)
  .controller("HomeScreen", HomeController);

function Auth() {
  var FIREB = new Firebase("https://name.firebaseio.com");
  return $firebaseAuth(FIREB);
}

function ApplicationConfig($stateProvider) {
  $stateProvider
    .state("home", {
      controller: "HomeScreen",
      templateUrl: "views/home.html"
    })
    .state("profile", {
      controller: "ProfileScreen",
      templateUrl: "views/profile.html",
      resolve: {
        currentUser: function(Auth) {
          // This will inject the authenticated user into the controller
          return Auth.$waitForAuth(); 
        }
      }
    });
}

function HomeController($scope, Auth, $state) {

  $scope.googlelogin = function() {

    Auth.$authWithOAuthPopup("google").then(function(authData) {

      users.child($scope.authData.google.cachedUserProfile.id).set({
        Username: $scope.authData.google.cachedUserProfile.id,
        Gender: $scope.authData.google.cachedUserProfile.gender || ""
      });

      $state.go("app.next");

    });
  }

}

function ProfileController(currentUser) {
  console.log(currentUser.facebook); // injected from router
}

The benefit of this approach is that you don't have to check for authenticated users in the controller. If the user is injected, you know you have an authenticated user.

Check out the AngularFire docs for more information.

来源：https://stackoverflow.com/questions/33983526/angularfire-cannot-read-property-facebook-how-do-i-keep-using-authdata-through