记一次AngularJs 路由 $stateChangeStart不起作用（细节决定成败）

Posted 2020-10-28 青春朝阳

var app= angular
  .module(‘app‘, [
    ‘ngAnimate‘,
    ‘ngCookies‘,
    ‘ngResource‘,
    ‘ngSanitize‘,
    ‘ngTouch‘,
    ‘ui.router‘,
    ‘ui.bootstrap‘,
    ‘datatablesDirectives‘,
    ‘ngTable‘,
    ‘ncy-angular-breadcrumb‘,
    ‘ngFileUpload‘,
    ‘MessageCenterModule‘,
    ‘angular-loading-bar‘,
    ‘toggle-switch‘
  ])
  .run(
    [‘$rootScope‘, ‘$state‘, ‘$stateParams‘, ‘AppSession‘,
      function ($rootScope, $state, $stateParams, AppSession) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $rootScope.$on(‘$stateChangeStart‘, function (event, toState, toParams, fromState, fromParams) {
          $state.previous = fromState;
          $state.previousParams = fromParams;
          if (toState.data.requiredLogin && !AppSession.getLogin() && !toParams.tokenAndName) {
            $state.go(‘login‘, {}, {
              reload: true
            });
            event.preventDefault();
          }
        });
      }
    ]
  ).config([‘cfpLoadingBarProvider‘, function (cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = true;
  }])
  .config(
    [‘$stateProvider‘, ‘$urlRouterProvider‘, ‘$breadcrumbProvider‘, ‘$httpProvider‘,
      function ($stateProvider, $urlRouterProvider, $breadcrumbProvider, $httpProvider) {
        $httpProvider.interceptors.push(‘TokenInterceptor‘);


        $urlRouterProvider.otherwise(‘/‘);
        $stateProvider
          .state(‘login‘, {
            url: ‘/‘,
            templateUrl: ‘views/login/login.html‘,
            controller: ‘loginCtrl‘,
            data: {
              requiredLogin: false
            }
          })
          .state(‘main‘, {
            url: ‘/main‘,
            abstract: true,
            templateUrl: ‘main.html‘,
            data: {
              requiredLogin: true
            },
            ncyBreadcrumb: {
              label: ‘主页‘
            }
          })
          .state(‘main.myWork‘, {
            url: ‘/myWork‘,
            templateUrl: ‘views/myWork/myWorkList.html‘,
            controller: ‘myWorkController‘,
            ncyBreadcrumb: {
              label: ‘我的工作台‘,
              parent: ‘main‘
            },
            data: {
              requiredLogin: true
            }
          }).......

状态改变事件

$scope.$on(‘$stateChangeStart‘, 
function(event, toState, toParams, fromState, fromParams), {
  // 如果需要阻止事件的完成

event.preventDefault();

});

参数：

event：该事件的基本信息

toState:我们可以得到当前路由的信息，比如路由名称，url,视图的控制器，模板路径等等

toParams:我们可以得到当前路由的参数

fromState：我们可以得到上一个路由的信息，比如路由名称，url,视图的控制器，模板路径等等

fromParams：我们可以得到上一个路由的参数

 

可以触发的事件包括：

stateChangeStart

当状态改变开始的时候被触发

$stateChangeSuccess

当状态改变成功后被触发

$stateChangeError

当状态改变遇到错误时被触发，错误通常是目标无法载入，需要预载入的数据无法被载入等。

 

按照上面的写法：用户在没有登录的情况下，跳转到路由 main.myWork 时，应该会再跳转到登录页面。但是发现跳转。
几经周折，发现是自己太过大意。没有引入

‘ui.router.state.events‘模块，index.html 页面 也没有引入响应的 stateEvents.js。