AngularFire -等待直到用户数据在控制器中被检索到

AngularFire - Wait until user data is retrieved in controller

本文关键字：控制器 检索 数据 用户数 等待 用户 AngularFire      更新时间：2023-09-26

用户注册用户名、电子邮件和密码。我使用FirebaseSimpleLogin与电子邮件进行身份验证，获取用户id，然后使用用户id加载我的用户:

var ref = new Firebase(FIREBASE_URL + 'users'); // data containing user information
var users = $firebase(ref);
$rootScope.$on('$firebaseSimpleLogin:login', function (e, authUser) { // wait until authenticated
  var query = $firebase(ref.startAt(authUser.uid).endAt(authUser.uid)); // find user by uid
  query.$on('loaded', function () {
    setCurrentUser(query.$getIndex()[0]); // get username from query
  });
});
function setCurrentUser (username) {
  $rootScope.currentUser = User.findByUsername(username);
}

现在，我的问题是，我想重定向到用户配置文件页面，如果我登录在我的主页:

app.controller('HomeCtrl', function ($rootScope, $scope, $location, Auth, User) {
    // wait for current user to be set
    // if signed in
    // location.path('/user/' + currentUser.username);
});

不幸的是，我不知道如何等到setCurrentUser函数在我重定向之前完成。是否有一种方法可以让我的控制器中的一个函数等待，直到另一个函数完成?

我有一个解决方案，但我很确定这不是正确的方法来做它。现在，我正在监视我的user变量被更新，然后在它变为user之后调用所有函数，如下所示:

$scope.$watch(
        function() { return $rootScope.currentUser }, // watch for variable to change
        function() {
            if ($rootScope.currentUser) { // if the current user is defined, change path
                $location.path('/users/' + $rootScope.currentUser.username);
            }
        }
    )

尝试为您的用户解析路由。以下面的柱塞演示为例。

恰好演示

该应用程序只是一个简单的登录页面到个人资料页面。它有一个HomeCtrl，在登录后导航到ResolveCtrl(这是配置文件页面)。

HomeCtrl只管理登录视图。当用户成功登录时，我们导航到配置文件页面。(Auth对象是我在Plunker中提供的自定义包装器)。

.controller('HomeCtrl', function($scope, Auth, $window) {
  $scope.user = {
    email: 'bob@email.com',
    password: 'password'
  };
  $scope.login = function() {
    Auth.login('password', $scope.user);
  };
  
  Auth.onLogin(function(e, user) {
    console.log('logged in!');
    $window.location.href = '#/resolve';
  });
  
})

现在我们已经登录了，我们将进入ResolveCtrl。此控制器在加载当前用户之前解析当前用户。这是data参数。

.controller('ResolveCtrl', function($scope, $route, data) {
  $scope.user = data;
})

但是这个参数是从哪里来的呢?我们可以在$routeProvider中设置一个resolve对象。这告诉ResolveCtrl，它不能加载，直到我们解决了这个承诺。因为Auth.getCurrentUser()返回一个promise，我们只需要返回它，它就会为我们解决。

.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: '_home.html',
        controller: 'HomeCtrl',
      })
      .when('/resolve', {
        templateUrl: '_resolve.html',
        controller: 'ResolveCtrl',
        resolve: {
          data: function(Auth) {
           // load the user before the view is loaded
           return Auth.getCurrentUser();
          }
        }
      })
      .otherwise({
        redirectTo: '/'
      });
  }
])

现在，当页面被加载时，我们知道用户将在那里。

相关文章：