AngularJS - 等待异步调用

时间:2014-04-10 22:20:00

标签: javascript angularjs

我开始学习AngularJS,到目前为止一直很好,但我目前仍处于关于同步功能的小问题上。

我希望在执行其余代码之前调用并返回函数AuthenticationSharedService.login()。我怎么能这样做?

app.js

myApp.config(['$routeProvider', '$httpProvider', 'USER_ROLES',
    function ($routeProvider, $httpProvider, USER_ROLES) {
        $routeProvider
            .when('/login', {
                templateUrl: 'views/login.html',
                controller: 'LoginController',
                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
            .when('/error', {
                templateUrl: 'views/error.html',
                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
            .otherwise({
                templateUrl: 'views/main.html',
                controller: 'MainController',
                access: {
                    authorizedRoles: [USER_ROLES.user]
                }
            });
    }])
    .run(['$rootScope', '$location', 'AuthenticationSharedService', 'Session', 'USER_ROLES',
        function($rootScope, $location, AuthenticationSharedService, Session, USER_ROLES) {
            $rootScope.$on('$routeChangeStart', function (event, next) {

                <!-- Bit of code to execute before going further -->
                if (!Session.login) {
                    console.log('First attempt to login');
                    AuthenticationSharedService.login();
                }
                <!-- /////////////////////////////////////////// -->

                if (AuthenticationSharedService.isAuthenticated()) {
                    // user is not allowed
                    $rootScope.$broadcast("event:auth-notAuthorized");
                } else {
                    // user is not logged in
                    $rootScope.$broadcast("event:auth-loginRequired");
                }
            });
        }]);

authenticationSharedService.js

myApp.factory('AuthenticationSharedService', ['$rootScope', '$http', '$cookieStore', 'authService', 'Session', 'Account',
    function ($rootScope, $http, $cookieStore, authService, Session, Account) {
        return {
            login: function () {
                return Account.get(function(data) {
                    Session.create(data.login, data.roles);
                    authService.loginConfirmed(data);
                });
            }
        };
    }]);

1 个答案:

答案 0 :(得分:3)

您需要使用resolve。请参阅http://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider或http://www.bfcamara.com/post/66001429506/authentication-in-a-spa-with-angular - 第二个链接非常好。

Resolve是应该注入控制器的依赖关系的映射。如果任何映射对象是函数,则将评估函数并注入其返回值。如果函数返回promises,则在解析promise之前不会呈现视图。

仅供参考,如果承诺被拒绝,则视图将不会被呈现。您可能希望在$ rootScope中处理这种情况。$ on('routeChangeError',functionToHandleRejection)

以下是一个适合您的示例:

.when('someUrl', {
  resolve: {
    object: function(AuthenticationSharedService) {
      return AuthenticationSharedService.login();
    }
  }
})