javascript - 在 Angular 中，我如何在启动前从服务器获取 Bootstrap 数据？

Question

一些信息。我正在开发一个单页应用程序，但我正试图将它变成一个 HTML 文件，而不是一个包含所有 Bootstrap 信息的实际动态页面。我还希望，当应用程序启动时(或可能之前)，检查当前 session 是否“登录”，如果没有，则将哈希指向“登录”。

我是 Angular 的新手，很难弄清楚如何编写此流程。所以，本质上..

1. 使用“延迟” Bootstrap 加载的 HTML 页面
2. 点击 URL 获取登录状态
3. 如果状态是'未登录'，直接到#/login
4. 启动应用

关于#2 和#3 住在哪里的任何指示？在我的“简单世界”中，我只是使用 jquery 获取该数据，然后调用 angular.resumeBootstrap([appname])。但是，由于我正在尝试真正学习 Angular 而不是仅仅绕过我不理解的部分，所以我想知道在这个地方会用到什么。我一直在寻找提供商，但我不确定这是否是我需要的。

谢谢!

编辑

根据@Mik378 的回答，我已将我的代码更新为以下内容作为测试。它在一定程度上起作用，但由于“get”是异步的，它允许应用程序继续加载之前的任何内容，然后关闭状态结果..

var app = angular.module('ping', [
    'ngRoute',
    'ping.controllers'
]).provider('security', function() {
    this.$get = ['$http', function($http) {
            var service = {
                getLoginStatus: function () {
                    if (service.isAuthenticated())
                        return $q.when(service.currentUser);
                    else
                        return $http.get('/login/status').then(function (response) {
                            console.log(response);
                            service.loggedIn = response.data.loggedIn;
                            console.log(service);
                            return service.currentUser;
                        });
                },
                isAuthenticated: function () {
                    return !!service.loggedIn;
                }
            };
            return service;
        }];
}).run(['security', function(security) {
        return security.getLoginStatus().then(function () {
            if(!security.isAuthenticated()) {
                console.log("BADNESS");
            } else {
                console.log("GOODNESS");
            }
        });
}]);

我希望这可以在第一个 Controller 启动之前以某种方式完成，这样它就不会加载(或试图加载)甚至尚未清除访问权限的内容。

编辑#2

我开始查看路由器中的“resolve”属性，@Mik378 验证了我正在查看的内容。我的最终代码(目前)按照我的意愿工作，如下所示(关于超长代码块的应用)

angular.module('ping.controllers', [])
        .controller('Dashboard', ['$scope', function($scope) {
            console.log('dashboard')
        }])
        .controller('Login', ['$scope', function($scope) {
            console.log('login')
        }]);

var app = angular.module('ping', [
    'ngRoute',
    'ping.controllers'
]).run(['$rootScope', '$location', function($root, $location) {
    $root.$on("$routeChangeError", function (event, current, previous, rejection) {
        switch(rejection) {
            case "not logged in":
                $location.path("/login"); //<-- NOTE #1
                break;
        }
    });
}]);

app.provider('loginSecurity', function() {
    this.$get = ['$http', '$q', function($http, $q) {
            var service = {
                defer: $q.defer, //<-- NOTE #2
                requireAuth: function() { //<-- NOTE #3
                    var deferred = service.defer();
                    service.getLoginStatus().then(function() {
                        if (!service.isAuthenticated()) {
                            deferred.reject("not logged in")
                        } else {
                            deferred.resolve("Auth OK")
                        }
                    });
                    return deferred.promise;
                },
                getLoginStatus: function() {
                    if (service.isAuthenticated()) {
                        return $q.when(service.currentUser);
                    } else {
                        return $http.get('/login/status').then(function(response) {
                            console.log(response);
                            service.loggedIn = response.data.loggedIn;
                            console.log(service);
                            return service.currentUser;
                        });
                    }
                },
                isAuthenticated: function() {
                    return !!service.loggedIn;
                }
            };
            return service;
        }
    ];
});

app.config(['$routeProvider', function($routeProvider) {
        console.log('Routing loading');
        $routeProvider.when('/', {
            templateUrl: 'static/scripts/dashboard/template.html',
            controller: 'Dashboard',
            resolve: {'loginSecurity': function (loginSecurity) {
                return loginSecurity.requireAuth(); //<- NOTE #4
            }}
        });
        $routeProvider.when('/login', {
            templateUrl: 'static/scripts/login/template.html',
            controller: 'Login'
        });
        $routeProvider.otherwise({redirectTo: '/404'});
}]);

注意事项:

1. 本节介绍路由故障。在“未登录”的情况下，我想捕获失败并将此人弹出到登录页面。
2. 我无法访问 requireAuth 函数内部的 $q，所以我获取了对它的引用。也许存在更好的方法？
3. 这个函数包装了另外两个 - 它使用从 getLoginStatus 返回的 promise ，但返回它自己的 promise ，如果 getLoginStatus 的最终结果以用户未登录结束，则该 promise 将被拒绝。有点像一个回合 -关于做事的方式。
4. 这会返回 #3 的 promise ，它被 $routeProvider 使用。所以如果它失败了，路由也会失败，你最终会在 #1 处捕获它。

哇哦。我觉得一天就够了。该喝啤酒了。

Answer 1

无需为您的案例使用延迟 Bootstrap :

angular.module('app').run(['security', '$location', function(security) {
  // Get the current user when the application starts
  // (in case they are still logged in from a previous session)
  security.requestCurrentUser().then(function(){
       if(!security.isAuthenticated())
       $location.path('yourPathToLoginPage')
     };   //service returning the current user, if already logged in
}]);

此方法 requestCurrentUser 如下所示:

requestCurrentUser: function () {
                    if (service.isAuthenticated())
                        return $q.when(service.currentUser);
                    else
                        return $http.get('/api/current-user').then(function (response) {
                            service.currentUser = response.data.user;
                            return service.currentUser;
                        });
                }

再次在 security 服务中:

isAuthenticated: function () {
                    return !!service.currentUser;
                }

注意模块的 run 方法 => 只要应用程序运行，就会调用此服务。

-- 更新--

为了防止在 requestCurrentUser 提供的 promise 被解析之前初始化任何 Controller ，一个更好的解决方案，正如下面评论中提到的，是使用 resolve 路由属性(property)。