как вызвать функцию перед каждым $ state.go() в угловом использовании stateProvider

Question

Название говорит все, но более подробно; Я хочу проверить, аутентифицирован ли пользователь, проверяя, доступен ли файл cookie или нет, до того, как звонок $state.go(), возможно ли установить его глобально и не принуждать его выполнять каждую функцию state.go()?

Answer 1

Таким образом, вы можете подключить в $stateChangeStart событие, которое происходит каждый раз, когда переход составляет около начать. Docs

Вы бы сделать что-то вроде этого:

app.run(['$state', '$rootScope', function ($state, $rootScope) { 
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
     // calling event.preventDefault() will prevent the transition, so this is used 
     // when you want to stop certain transitions. 
    } 
}); 

В настоящее время существует два варианта изменения, хотите ли вы, чтобы предотвратить маршрут.

Вы можете использовать toState и fromState для поиска в словаре маршрутизации.

Вы можете использовать service или factory, чтобы изменить, можете ли вы или нет.

Так что, если вы создаете фабрику, это пример, это дает вам понятие:

app.factory('routingLogic', function() { 
    var singletonShouldRoute = true; 
    var service = { 
     canRoute: canRoute, 
     setCanRoute: setCanRoute 
    }; 
    return service; 

    function setCanRoute(shouldRoute) { 
     singletonShouldRoute = shouldRoute 
    } 

    function canRoute() { 
     return singletonShouldRoute ; 
    } 
} 

app.controller('somePage', ['routingLogic', '$state', function (routingLogic, $state) { 
    var vm = this; 

    vm.shouldRoute = false; 

    vm.changeShouldRoute = function() { 
     routingLogic.setCanRoute(vm.shouldRoute); 
    } 

    vm.goNextPage = function() { 
     $state.go('some page'); 
    } 
}); 

app.run(['$state', '$rootScope', 'routingLogic', function ($state, $rootScope, routingLogic) { 
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
     // calling event.preventDefault() will prevent the transition, so this is used 
     // when you want to stop certain transitions. 

     if (!routingLogic.canRoute()) { event.preventDefault(); } 
    } 
}); 

Однако, вы можете переключиться вне canRoute со словарем:

app.factory('routingLogic', function() { 
    var allowedRoutes = { 
     "thisroute": true, 
     "thatroute": true 
    } 

    var service = { 
     canRoute: canRoute, 
     setCanRoute: setCanRoute 
    }; 
    return service; 

    // you can pull this out to provider level if you want it in the config stage 
    function setCanRoute(routeName) { 
     allowedRoutes[routeName] = true; 
    } 

    function canRoute(routeName) { 
     return allowedRoutes[routeName] || false; 
    } 
} 

app.run(['$state', '$rootScope', 'routingLogic', function ($state, $rootScope, routingLogic) { 
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
     // calling event.preventDefault() will prevent the transition, so this is used 
     // when you want to stop certain transitions. 

     if (!routingLogic.canRoute(toState)) { event.preventDefault(); } 
    } 
}); 

Вы можете сделать еще один шаг вперед, если вы хотите разрешить только определенные маршруты маршрутов. Таким образом, вы можете перейти от WizardStep1 к WizardStep2 но не WizardStep3:

app.factory('routingLogic', function() { 
    var allowedRoutes = { 
     "thisroute": ["thatroute", "theOtherRoute"], 
     "thatroute": ["home"] 
    } 

    var service = { 
     canRoute: canRoute, 
     setCanRoute: setCanRoute 
    }; 
    return service; 

    // you can pull this out to provider level if you want it in the config stage 
    function setCanRoute(routeName) { 
     allowedRoutes[routeName] = true; 
    } 

    function canRoute(fromRoute, toRoute) { 
     var allowedTo = allowedRoutes[fromRoute] || []; 

     return allowedTo.some(function (allowedRoute) { return allowedRoute === toRoute; }); 
    } 
} 

Answer 2

Вы можете использовать «$ stateChangeStart»

app.run(function($rootScope, $state, Auth) { 
    $rootScope.$on('$stateChangeStart', function(event, newUrl, oldUrl) { 
     if (!Auth.isLoggedIn()) { 
      event.preventDefault(); 
      $state.go('login', { 
       next: newUrl.name 
      }); 
     } 
    }); 
}) 

Или вы можете пользователь HTTP-перехватчики для API вызовов

.factory('authInterceptor', ['$q', '$cookieStore', '$location', function($q, $cookieStore, $location) { 
    return { 
     // Intercept 401s and redirect you to login 
     responseError: function(response) { 
      if (response.status === 401) { 
       $location.path('/login'); 
       // remove any stale tokens 
       $cookieStore.remove('token'); 
      } 
     } 
    }; 
}]) 

Answer 3

Предположим, у вас есть главный модуль

angular 
    .module('app.core') 
    .run(appRun); 

Вы можете добавить к appRun функции обработчика состояния меняющийся

$rootScope.$on('$stateChangeStart', function(
     evt, toState, toParams, fromState, fromParams 
    ) { 
     ...Do your stuff here... 
    });