角ui路由器在路由前等待一个承诺

I am using Angular 1.5.8 and angular-ui-router 0.3.2. I need to resolve an authentication method on every route change.

我用的是角1。5.8和角ui-路由器0。3.2。我需要在每一个路由更改上解析一个身份验证方法。

I dont want to add the resolve property for each route so I created this in App.run

我不想为每个路由添加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();
        }
    }
});

`

”

It is usually working well, But I noticed that many times the application is routing before the promise permissionAPI.me() resolved and that causing errors later.

它通常工作得很好，但是我注意到，在promise permissionAPI.me()解决之前，很多时候应用程序都是路由的，这将导致稍后的错误。

How can I make sure the route will take effect just after that promise?

我怎样才能确保这条路线在承诺之后生效呢?

Or, how can I make a main resolve for all of my routes by passing that promise from $stateChangeStart ?

或者，我如何通过从$stateChangeStart传递这个承诺来实现对所有路线的主要解决方案?

Thank you!

谢谢你！

1 个解决方案

#1

Create an app state! Abstract states are useful for if you need to access data consistently across your application, but don't want to have that data associated with a specific 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);
                }
            }
        });

You can then access that data in subsequent resolve blocks or in your controllers like app.controller('ExampleCtrl', function (ActiveUser) {}); as long as your controller is in a child state of 'app'. This is achieved with the naming convention 'app.'

然后，您可以在后续的解析块中或在app.controller('ExampleCtrl'， function (ActiveUser){})中访问该数据;只要你的控制器处于“app”的子状态。这是通过命名约定应用程序实现的。