angularfire 无法读取属性 facebook - 我如何在整个应用程序中继续使用 authData

Question

我正在使用 ionic 框架和 firebase 开发 android 游戏。

我的计划是让用户使用带有 firebase 的 facebook 登录，之后我想将游戏数据保存到用户数据库密钥中。

第一部分正在运行。该脚本根据用户的 facebook 详细信息创建一个数据库数组。但问题是在完成此操作后，我似乎无法让 angular 更改任何数据库数据。看来 authData 卡在了登录函数中...

有没有办法保留授权数据以用于不同的控制器和功能？

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"
        });
    }


});

这是它在 firebase 中创建的数据结构

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

尝试编辑后出现此错误...（使用 changelevel 函数）

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)

Answer 1

主要问题是您依赖 cachedUserProfile.gender 属性存在。不能保证每个用户都可以使用。您需要找到回退以避免错误。

让我们通过路由器中的 resolve() 方法注入用户来简化。不要介意代码的结构，它来自 Angular Styleguide（我更喜欢编写 Angular 应用程序的方式）。

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
}

这种方法的好处是您不必在控制器中检查经过身份验证的用户。如果用户被注入，你就知道你有一个经过身份验证的用户。

查看 AngularFire docs 了解更多信息。

angularfire 无法读取属性 facebook - 我如何在整个应用程序中继续使用 authData

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

javascript

angularjs

firebase

angularfire

ionic-framework

angularfire 无法读取 属性 facebook - 我如何在整个应用程序中继续使用 authData

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

javascript

angularjs

firebase

angularfire

ionic-framework

angularfire 无法读取属性 facebook - 我如何在整个应用程序中继续使用 authData