有没有办法阻止我的 angularjs 应用程序启动时加载初始状态？

Question

背景

在加载第一个状态之前，我的应用需要向服务器发出请求以验证用户是否具有经过身份验证的会话。根据 url，用户可能需要被重定向到登录页面。

即如果初始 url 是 myapp.com/#/profile 并且用户没有预先存在的经过身份验证的会话，他们将被重定向到 myapp.com/#/login

问题

我有处理这种情况的逻辑，但是在向服务器发出会话数据请求之后，在它完成之前，会在服务器响应之前触发初始状态更改并加载和显示页面

可能的解决方案

1) 我使用 django 作为后端，因此可以从应用程序中删除初始服务器请求，并将数据直接传递给 django 模板中的应用程序。要么通过

• 主控制器的 ng-init - 虽然我读过这是一个 坏主意，因为这不是它的预期用途

• 或者在 django 模板中的脚本标签中 - 我讨厌 这样做，因为我宁愿将所有应用程序逻辑单独保存在 js 文件中

2) 监听初始 $stateChangeStart，取消它，然后在服务器请求完成后调用 $state.reload()

问题

在我看来，在初始状态更改发生之前满足某些标准是一个相当普遍的要求，所以我想知道我是否遗漏了文档中的某些内容，并且已经有一种内置的方法来处理这种情况?

或者有没有办法停用 $urlRouterProvider/$stateProvider 以防止发生初始状态更改？

Answer 1

假设您的所有身份验证逻辑都已经在 AuthService 之类的内部，是否可以执行以下操作？

// 'AuthService' injected earlier
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (!AuthService.isAuthenticated()) {
        // prevent navigation. don't go anywhere;
        // navigation will occur inside AuthService
        event.preventDefault();

        AuthService.setNextState(toState.name);
        AuthService.authenticateWithServer();
    }
    // proceed normally if user is already authenticated
});

那么，你的AuthService：

app.service('AuthService', function($rootScope, $http, $state) {
    var next;

    this.setNextState = function(nextState) { next = nextState; };

    this.isAuthenticated = function() { ... };

    this.authenticateWithServer = function() {
        $http.post('/authen', { ... }).success(function(user){
            // house-keeping
            $rootScope.user = user;

            // navigate by state name
            $state.go(next);
        }).error(function(error) {
            // navigate to login screen
            $state.go('login');
        });
    };
});

这样，您的状态定义是干净的，并且身份验证逻辑被隔离在一个地方。您还可以确保在获得所需的所有信息之前永远不会进行导航。