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

Question

背景

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

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

问题

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

可能的解决方案

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

• 主 Controller 的 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');
        });
    };
});

这样一来，您的状态定义就很干净，并且身份验证逻辑被隔离在一个地方。您还可以确定，在您拥有所需的所有信息之前，导航永远不会发生。