javascript - 如何使用 stateProvider 在 Angular 中的每个 $state.go() 之前调用函数

Question

标题说明了一切，但还有更多细节；我想通过在 $state.go() 调用之前检查 cookie 是否可用来检查用户是否已通过身份验证，是否可以全局设置它，而不是被迫在每个state.go() 函数？

Answer 1

因此，您可以 Hook 每次转换即将开始时发生的 $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在路由字典中查找。

您可以使用服务或工厂来更改是否可以。

因此，如果您创建一个工厂，这是一个示例，它为您提供了概念:

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; });
   }
}