javascript - 在 AngularJS 中的 Controller 之前加载用户上下文

Question

我开发了一个 angularjs应用程序，我有一个 REST API，用于从我的 AngularJS 应用程序中获取应用程序资源。当用户自己登录时，我将他的访问 token 保存在 cookie 中。如果他刷新页面，我想从 token 中取回用户信息，例如:

mymodule.run(function ($rootScope, $cookies, AuthService, Restangular) {
    if ($cookies.usertoken) {
        // call GET api/account/
        Restangular.one('account', '').get().then( function(user) {
            AuthService.setCurrentUser(user);
        });
    }
});

授权服务:

mymodule.factory('AuthService', function($http, $rootScope) {
    var currentUser = null;

    return {
        setCurrentUser: function(user) {
            currentUser = user;
        },
        getCurrentUser: function() {
            return currentUser;
        }
    };
});

但是如果用户访问一个需要用户变量的 Controller :

mymodule.controller('DashboardCtrl', function (AuthService) {
     var user = AuthService.getCurrentUser();
});

Controller 代码在 API 调用结束之前执行，所以我有一个空变量。在启动 Controller 之前等待用户数据加载是否有好的解决方案？

我找到了 this link但我正在寻找一种更全局的方法来初始化应用上下文。

Answer 1

这是我喜欢的一种处理方法，假设 Restangular 从 then 返回新的 promise (我没有使用 Restangular)。 promise 可以存储在类似 AuthService 的某个地方，然后在 Controller 中稍后使用。首先，向 AuthService 添加一个属性来保存新的 promise :

return {
    authPromise: {},  // this will hold the promise from Restangular
    // setCurrentUser, getCurrentUser
    // ...

调用 Restangular 时，保存 promise 并确保返回用户数据，以便 Controller 稍后可以访问它，如下所示:

AuthService.authPromise = Restangular.one('account', '').get()
                          .then( function(user) {
                              AuthService.setCurrentUser(user);
                              return user; // <--important
                           });

最后，在 Controller 中创建一个新的 promise，它将设置 user 变量。:

mymodule.controller('DashboardCtrl', function (AuthService) {
    var user;
    AuthService.authPromise.then(function(resultUser){
        user = resultUser;
        alert(user);
        // do something with user
    });
});

演示:Here is a fiddle我用 $timeout 模拟了一个 AJAX 调用。当超时结束时， promise 就解决了。