如何使用$state.go调用角中的每个$state.go()之前的函数

Question

标题说明了一切，但更多细节；我想通过在非常$state.go()调用之前检查cookie是否可用，来检查用户是否经过身份验证，是否有可能在全局设置cookie，而不强制在每个state.go()函数上这样做？

Answer 1

因此，您可以连接到$stateChangeStart事件，每次转换即将开始时都会发生。文档

你会做这样的事：

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