javascript - 切换到使用 Browserify 后，Angular UI Router 的 $stateChangeSuccess 未发出

Question

我有一个 Angular 1.5.x 应用程序，它使用 Angular UI Router 的 $stateChangeSuccess 事件来注册一个监听器，该监听器验证用户是否在每次状态更改时登录以保护应用程序的某些 View 。通过 Browserify 将应用程序移植到 CommonJS 环境后，已注册的事件处理程序不再执行，但 UI Router 会像以前一样不断更改状态。我需要帮助来弄清楚 UI Router 是否以及为什么不发出事件，或者问题是否是由 Angular 作用域在 CommonJS 环境中工作时的不同行为引起的。非常感谢任何帮助，谢谢!

编辑

我通过 npm 安装了 angular-ui-router 1.0.0-alpha.1。我根据 Chris 的评论检查了 Angular ui 路由器 github 发布文档，并决定通过恢复到 0.2.18 来查看它是否有效，但没有。

应用程序.js

唯一相关的 require 语句是路由、核心和服务模块。

'use strict';

var angular = require('angular');

var routes = require('./app.routes.js');

// Sub-module Dependencies 
var core       = require('./app.core.js');
var services   = require('./services');
var layout     = require('./layout');
var auth       = require('./authentication');
var landing    = require('./landing');
var dashboard  = require('./dashboard');
var userManual = require('./user-manual');

// Define Angular Module
var app = angular.module('app', [
  core,
  services,
  layout,
  auth,
  landing,
  dashboard,
  userManual
])
.config(html5ModeTrue)
.config(routes)
.run(runBlock);

////////////////

html5ModeTrue.$inject = ['$locationProvider'];
runBlock.$inject = ['authService'];

////////////////

function html5ModeTrue ($locationProvider) {
  $locationProvider.html5Mode(true);
}

function runBlock(authService) {
  authService.initialize();
}

app.routes.js

'use strict';

routes.$inject = ['$stateProvider', '$urlRouterProvider'];

function routes($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $urlRouterProvider.when('/dashboard', '/dashboard/analysis');
  $stateProvider
    .state('home', {
      url: "/",
      templateUrl: "app/landing/home.html"
    })
    .state('about', {
      url: "/about",
      templateUrl: "app/landing/about.html"
    })
    .state('atlas', {
      url: "/atlas",
      templateUrl: "app/landing/atlas.html"
    })
    .state('login', {
      url: "/login",
      templateUrl: "app/authentication/login.html",
      controller: "LoginController",
      controllerAs: "login"
    })
    .state('dashboard', {
      abstract: true,
      // url: "/dashboard",
      templateUrl: "app/dashboard/dashboard.html",
      controller: "DashboardController",
      controllerAs: "dash",
      restricted: true,
    })
    .state('dashboard.analysis', {
      url: "/dashboard/analysis",
      templateUrl: "app/dashboard/dashboard.analysis.html"
    })
    .state('dashboard.vmod', {
      url: "/dashboard/vmod",
      templateUrl: "app/dashboard/dashboard.vmod.html"
    })
    .state('dashboard.datasets', {
      url: "/dashboard/datasets",
      templateUrl: "app/dashboard/dashboard.datasets.html"
    })
    .state('dashboard.defaults', {
      url: "/dashboard/defaults",
      templateUrl: "app/dashboard/dashboard.defaults.html"
    })
    .state('dashboard.user-management', {
      url: "/dashboard/user-management",
      templateUrl: "app/dashboard/dashboard.user-management.html"
    })
    .state('user-manual', {
      url: "/user-manual",
      templateUrl: "app/user-manual/user-manual.html",
      restricted: true
    })
    .state('user-manual.analysis', {})
    .state('user-manual.vmod', {})
    .state('user-manual.datasets', {});
}

module.exports = routes;

应用核心.js

如下所示，通过 npm 安装的 angular-ui-router 被要求进入应用程序的核心依赖项子模块

'use strict';

// Module Dependencies
require('angular-animate');       // ngAnimate
require('angular-ui-bootstrap');  // ui.bootstrap
require('angular-ui-router');     // ui.router
require('ui-leaflet');            // ui-leaflet
require('leaflet');               // Dependency for ui-leaflet
require('angular-simple-logger'); // Dependency for ui-leaflet

// Define Angular Module
var name = 'app.core';
require('angular').module(name, [
  'ui.bootstrap',
  'ui.router',
  'ngAnimate',
  'ui-leaflet',
]);

// Expose Angular Module Name For Easy Injection
module.exports = name;

服务/index.js

此文件只是作为请求应用程序的 Angular 服务的入口点。

'use strict';

// Module Dependencies
var authService = require('./auth.service.js');
var userManagementService = require('./user-management.service.js');

// Define Angular Module
var name = 'app.services';
require('angular')
  .module(name, [])
  .factory('authService', authService)
  .factory('userManagementService', userManagementService);

module.exports = name;

服务/auth.service.js

此服务中的初始化函数向 $stateChangeSuccess 事件注册一个监听器，该事件永远不会被调用。

'use strict';

authService.$inject = ['$q', '$window', '$http', '$rootScope', '$location'];

function authService ($q, $window, $http, $rootScope, $location) {
  var userSession = null;

  var service = {
    initialize: initialize,
    isLoggedIn: isLoggedIn,
    getUserSession: getUserSession,
    login: login,
    logout: logout
  };
  return service;

  ////////////////

  function initialize() {
    var accessToken = $window.sessionStorage["fa-session"];
    userSession = accessToken ? JSON.parse(accessToken) : null;
    $rootScope.$on('$stateChangeSuccess', onStateChangeSuccess);

    function onStateChangeSuccess(event, toState, fromState, fromParams) {
      if (toState.restricted && isLoggedIn() === false) {
        $location.path('/login');
      }
    }
  }

  function isLoggedIn() {
    return userSession || false;
  }

  function getUserSession() {
    return userSession;
  }

  function login(username, password) {
    var deferred = $q.defer();
    $http.post('/api/login', {username: username, password: password})
      .then(loginComplete)
      .catch(loginFailed);
    return deferred.promise;

    function loginComplete(response) {
      userSession = {
        accessToken: response.data.access_token,
        username: response.data.username
      };
      $window.sessionStorage["fa-session"] = JSON.stringify(userSession);
      deferred.resolve(userSession);
    }

    function loginFailed(error) {
      deferred.reject(error);
    }
  }

  function logout() {
    var deferred = $q.defer();
    $http.post('/api/logout', {headers: {access_token: userSession.accessToken}})
      .then(logoutCompleted)
      .catch(logoutFailed);
    return deferred.promise;

    function logoutCompleted(response) {
      userSession = null;
      $window.sessionStorage["fa-session"] = null;
      deferred.resolve(response);
    }

    function logoutFailed(error) {
      deferred.reject(error);
    }
  }
}
module.exports = authService;

Answer 1

所以我设法通过使用 Chris T 在他的评论中提到的 $transition.on* 钩子(Hook)让它工作。我还调查了这个 $rootScope 问题是否发生在状态更改事件之外。从我能够验证的情况来看，$scope 和 $rootScope 事件发射器和处理程序与我的 Controller 完美配合。

我改变了这个:

.state('user-manual', {
  url: "/user-manual",
  templateUrl: "app/user-manual/user-manual.html",
  restricted: true
})

在此，受限属性被 authService 内部的偶数监听器使用:

.state('user-manual', {
  url: "/user-manual",
  templateUrl: "app/user-manual/user-manual.html",
  // restricted: true
  onEnter: function (authService, $location) {
    if (!authService.isLoggedIn()) {
      $location.path('/login');
    }
  }
})