如何通过当前登录的用户ID来解决ui路由器状态下的阻止？ （AngularJS）

Question

我正在尝试将当前已登录的用户传递到“用户”状态的解析块（我正在使用ui-router），因此登录后，用户将使用... / users / ：ID。

其他路由嵌套在：user路由内，所以这对我来说似乎是最合乎逻辑的路径（我可能错了）。

我在这里使用angular_devise，所以我应该能够通过Auth从API中提取：id，但是我遇到了一些麻烦。

（下面包括其他可能的相关文件。）

App.js

$stateProvder
  .state('users', { 
      url: '/users/{id}', 
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl',
      resolve: {
          userPromise: ['$stateParams', 'users', 'Auth', function($stateParams, users, Auth) {
            return users.get(
                Auth.currentUser().then(function (user) {
                return user.id;
            })
          );
      }]
    }
  })

Users.js

.factory('users', ['$http', function($http) {
    var u = {
        userArray: []
    };
    u.get = function(id) {
        return $http.get('/users/' + id + '.json').then(function(res) {
            console.log('request: ', res.data);
            angular.copy(res.data, u.userArray);

        });
    };
    return u;
}]);

Users_controller.rb

class UsersController < ApplicationController
    def show
        @user = User.find(params[:id])
        authorize @user
        respond_with @user
    end
end

NavCtrl.js

.controller('NavCtrl', [
    '$scope',
    'Auth',
    function($scope, Auth) {
        $scope.signedIn = Auth.isAuthenticated;
        $scope.logout = Auth.logout;

        Auth.currentUser().then(function (user) {
            $scope.user = user;
        });

        $scope.$on('devise:new-registration', function (e, user) {
            $scope.user = user;
        });

        $scope.$on('devise:login', function (e, user) {
            $scope.user = user;
        });

        $scope.$on('devise:logout', function (e, user) {
            $scope.user = {};
        });
    }])
;

仅供参考。 $ http请求被发送到Rails后端。

如果有人能告诉我我可能做错了，我将不胜感激。

Answer 1

如果有人能告诉我我可能做错了，我将不胜感激。

如果我们重述您的代码：

$stateProvder
  .state('users', { 
      url: '/users/{id}', 
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl',
      resolve: {
          userPromise: ['$stateParams', 'users', 'Auth', function($stateParams, users, Auth) {
            var derivePromise = Auth.currentUser()
               .then(function (user) {
                    return user.id;
            });
            //WRONG - user.get does not accept promises
            return users.get(derivedPromise);
      }]
    }
  })

您可以看到Auth.currentUser().then(fn)返回派生的承诺，并且users.get函数不接受承诺。

---

供将来参考，我怎么知道这实际上是派生的诺言而不是数字？

具有.then方法的任何对象都将返回派生的Promise。 这是由Promises / A +开放标准针对可互操作的JavaScript promises指定的 。

AngularJS使用$ q服务承诺API 。

连锁承诺

因为调用promise的.then方法会返回新的派生promise，所以很容易创建promise的链。

可以创建任何长度的链，并且由于一个承诺可以用另一个承诺来解决（这将进一步推迟其解决方案），因此可以在链中的任何点暂停/推迟对承诺的解决。 这样就可以实现功能强大的API。

将promise视为将来会返回的值的容器。 该值也只能通过登记功能（使用被检索.then或.catch方法）与$q服务。 $q服务保留这些函数，并在解决诺言的情况下实现或拒绝诺言。 在承诺解决后 ，这些方法也可以用于检索结果。

$q服务支持支持将promise作为参数传递给其他函数，将其作为其他函数的值返回，并将它们分配给变量或存储在数据结构中。

总而言之， 将值返回到.then方法会创建一个适用于链接的新派生诺言。 它永远不会返回值。

有关更多信息，请参见$q Angular执行顺序 。