javascript - ui-router $transitions 钩子(Hook)在浏览器重新加载时不会被调用

Question

我正在使用 ui-router 1.0.3 在 Angular 1.5.8 中制作一个应用程序。Ui 路由器的钩子(Hook)很棒，但是它们在浏览器重新加载时不起作用。

这是我用于注册状态的配置 block :

(function(app) {
    'use strict';
    app.config(configFn);

    configFn.$inject = ['$stateProvider'];

    function configFn($stateProvider) {
        $stateProvider
            .state('login', {
                url: '/login',
                component: 'loginComponent'
            })
            .state('selfcare', {
                url: '/',
                component: 'selfCareComponent',
                abstract: true
            })
            .state('selfcare.dashboard', {
                url: 'dashboard',
                component: 'dashboardComponent'
            })
            .state('selfcare.appHome', {
                url: 'appHome/:id',
                component: 'appHomeComponent'
            })
            .state('selfcare.serviceHome', {
                url: 'serviceHome/:id',
                component: 'serviceHomeComponent'
            })
    }

})(angular.module('selfcare'));

以下是用于注册转换 Hook 的运行 block :

(function(app) {
    'use strict';
    app.run(runFn);

    runFn.$inject = ['$rootScope', '$transitions' ,'$localStorage'];

    function runFn($rootScope, $transitions,  $localStorage) {

        $transitions.onStart({to:'**'}, function(transtion){
            $rootScope.ngProgress.start();
        })

        $transitions.onSuccess({to:'**'}, function(transtion){
            $rootScope.ngProgress.complete();
        })

       $transitions.onBefore({to:'login'}, function(transtion){
            if($localStorage.isLoggedIn > Date.now()){
                return transtion.router.stateService.target('selfcare.dashboard');
            }
        })

       $transitions.onBefore({to:'selfcare.**'}, function(transtion){
            if(!$localStorage.isLoggedIn || $localStorage.isLoggedIn < Date.now()){
                $localStorage.$reset();
                return transtion.router.stateService.target('login');
            }
        })
    }

})(angular.module('selfcare'));

我不知道我哪里做错了。一旦应用程序稳定并正常工作，就会调用 Hook ，但在浏览器重新加载时，我可以打开任何网址，并且不会调用任何 Hook 。

任何帮助将不胜感激。谢谢

Answer 1

我以某种方式设法完成了所需的工作，但我不知道这是否是最好的方法。我想在运行 block 中编写转换。

作为钩子(Hook)回调参数的Transition对象提供了一个注入(inject)器，可用于获取应用程序的config block 中的运行时服务。

(我们还可以在config block 中注入(inject)$injector)

(function(app) {
    'use strict';
    app.config(configFn);

    configFn.$inject = ['$transitionsProvider'];

    function configFn($transitionsProvider) {

        $transitionsProvider.onStart({ to: '**' }, function(transtion) {
            transtion.injector().get('$rootScope').ngProgress.start();
        })

        $transitionsProvider.onSuccess({ to: '**' }, function(transtion) {
            transtion.injector().get('$rootScope').ngProgress.complete();
        })

        $transitionsProvider.onBefore({ to: 'login' }, function(transtion) {
            var $localStorage = transtion.injector().get('$localStorage');
            if ($localStorage.isLoggedIn > Date.now()) {
                return transtion.router.stateService.target('selfcare.dashboard');
            }
        })

        $transitionsProvider.onBefore({ to: 'selfcare.**' }, function(transtion) {
            var $localStorage = transtion.injector().get('$localStorage');
            if (!$localStorage.isLoggedIn || $localStorage.isLoggedIn < Date.now()) {
                $localStorage.$reset();
                return transtion.router.stateService.target('login');
            }
        })
    }

})(angular.module('selfcare'));