javascript - Angular - ui-router 在路由之前等待 promise

Question

我正在使用 Angular 1.5.8 和 angular-ui-router 0.3.2。我需要在每次路由更改时解析身份验证方法。

我不想为每个路由添加 resolve 属性，所以我在 App.run

中创建了它

//check permissions

$rootScope.$on('$stateChangeStart', function (evt, toState) {
    if ($localStorage.token || toState.authenticated) {
        $http.defaults.headers.common = {
            'Authorization': 'Token ' + $localStorage.token,
            'Accept': 'application/json'
        };

        permissionAPI.me()
            .then(function(data){
                $rootScope.user = data;
            })
            .catch(function(){
                if(toState.authenticated) {
                    $rootScope.logout();
                }
            })
    }
    else {
        if(toState.authenticated) {
            $rootScope.logout();
        }
    }
});

`

它通常运行良好，但我注意到很多时候应用程序在 promise permissionAPI.me() 解决之前进行路由，并且稍后会导致错误。

我如何确保路由在该 promise 之后立即生效？

或者，我如何通过传递来自 $stateChangeStart 的 promise 来为我的所有路由创建一个主要的 resolve ？

谢谢!

Answer 1

创建应用状态!如果您需要在整个应用程序中一致地访问数据，但又不想让该数据与特定 View 相关联，则抽象状态非常有用。

    $stateProvider
        .state('app', { 
            url: '/app/',
            template: '<div ui-view></div>',
            controller: 'AppCtrl',
            abstract: true,
            resolve: {
                ActiveUser: function (AuthService) {
                    return AuthService.whoAmI();
                }
            }
        })
        .state('app.home', {
            url: '',
            templateUrl: 'app.home.html',
            controller: 'HomeCtrl',
            resolve: {
                Categories: function (ActiveUser, MessagesService) {
                    return MessagesService.getAll(User);
                }
            }
        });

然后您可以在后续的解析 block 中或在您的 Controller 中访问该数据，例如 app.controller('ExampleCtrl', function (ActiveUser) {}); 只要您的 Controller 在 child 中'app' 的状态。这是通过命名约定 'app.'

实现的