Question

我已阅读this question and answer，但不相信这是我问题的解决方案。

我有一个应用程序，在加载应用程序之前我需要当前登录用户的详细信息。这似乎与this question非常相似，但不同之处在于我想在引导应用程序之前使用已存在于authenticationService中的方法，并将结果缓存在该服务中。

app.bootstrap.js

(function(){
    'use strict';

    fetchUser()
        .then(bootstrapApplication);

    function fetchUser() {
        var injector = angular.injector(['app']);
        var authenticationService = injector.get('authenticationService');

        return authenticationService.getUser().then(function(response) {
          // Got user successfully, user is now cached in authenticationService.user
          console.log(response.data);
        });
    }

    function bootstrapApplication() {
        angular.element(document).ready(function() {
          angular.bootstrap(document, ['app']);
      });
    }

})();

我可以很好地调用该服务方法，但问题出现在我引导应用程序并创建了该服务的新实例时，因此，我从HTTP请求缓存的数据位于不同的实例中服务。

authentication.service.js

(function(){
    'use strict';

    angular
        .module('app.authentication')
        .factory('authenticationService', authenticationService);

    authenticationService.$inject = ['$http', '$cookies', '$log', '$q', 'API_SETTINGS', '_'];

    function authenticationService($http, $cookies, $log, $q, API_SETTINGS, _) {
        var factory = {
            user          : {},
            login         : login,
            logout        : logout,
            getUser       : getUser,
            isLoggedIn    : isLoggedIn,
            getSessionId  : getSessionId
        };

        return factory;

        function getUser() {
            return $http.get(API_SETTINGS.url + '/account', { 
                params: { 
                    'api_key'     : API_SETTINGS.key,
                    'session_id'  : $cookies.get('sessionId')
                }})
            .then(function(response) {
                // Great, cache the user and return the response
                factory.user = response.data;
                return response;
            });
        }

    }

})();

无论如何，我可以使用我的authenticationService的相同实例在引导之前和之后进行HTTP调用吗？还是有替代方案吗？

我考虑过的一件事是将用户附加到window成功回调中的fetchUser，以便在我的authenticationService我可以设置factory.user = $window.user || {}，但我可以＃39} ; d不想这样做。

Answer 1

你可以通过相反的方式解决这个问题 - 让你的Angular应用程序引导并阻止你的UI做任何事情，直到安全服务被初始化。

//~ ...

/**
 * Make UI Router wait.
 */
config(function($urlRouterProvider) {
    $urlRouterProvider.deferIntercept();
}).

/**
 * Initialize security and then activate UI Router.
 */
run(function($urlRouter, securityManager) {
    securityManager.init().then(function() {
        $urlRouter.sync();
        $urlRouter.listen();
    });
}).

//~ ...

在手动引导Angular app

1 个答案: