Question

我正在尝试以角度方式实现前端JWT身份验证，但$ stateChangeStart事件不会在状态之间触发。我正在使用在es2015中编写的基于组件的体系结构，并与Webpack捆绑在一起。

当我在状态之间切换时，在运行块中设置的$ stateChangeStart监听器不会触发。

app.js是应用程序的入口点。我将其他角度模块作为组件包含在内。

import 'normalize.css';
import {appDirective} from './app.directive';

// Angular Dependencies
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ngAnimate from 'angular-animate';

// JWT Dependencies
import angularJwt from 'angular-jwt';
import angularStorage from 'angular-storage';

// Import shared services
import {services} from './services/services';

// Import components
import {signup} from './components/signup/signup';
import {login} from './components/login/login';
import {dashboard} from './components/dashboard/dashboard';

angular.module('app', [
  uiRouter,
  ngAnimate,
  angularJwt,
  angularStorage,

services.name,

signup.name,
login.name,
dashboard.name

])
.directive('app', appDirective)

// config $httpInterceptors to attach JWT tokens

.run(function($rootScope, $state, Auth) {
  $rootScope.$on('$stateChangeSuccess', function(e, to){
    // Check for authentication, but function does not execute
  });
});

以下是组件入口点文件的示例。我为这些文件中的每个组件设置了状态。

import {dashboardDirective} from './dashboard.directive';
import angular from 'angular';
import uiRouter from 'angular-ui-router';

export const dashboard = angular.module('dashboard', [uiRouter])
  .config(($stateProvider) => {
    $stateProvider.state('dashboard', {
      url: '/dashboard',
      template: '<dashboard></dashboard>',
      authenticate: true
    });
  })
  .directive('dashboard', dashboardDirective);

使用主应用程序模块上的.run块来设置状态更改的侦听器可以与其他应用程序架构一起使用，但我似乎无法理解为什么它不能在这里工作。

Answer 1

这应该触发$stateChangeStart侦听器运行。

$stateProvider.state('dashboard', {
  url: '/dashboard',
  template: '<dashboard></dashboard>',
  authenticate: true,
  resolve: {
    data: function($q) {
      var deferred = $q.defer();

      setTimeout(function() {
        deferred.resolve();
      }, 1000);

      return deferred.promise;
    }
  }
});

Answer 2

要使用状态更改事件，您必须使用stateEvents.ts重建库。它们已被弃用，最好使用这些功能。有一些语法糖使这很容易。

.state('home', {
    url: '^/home/',
    onStart: ['$transition', '$state', function( transition, state){
    //your handling of this event
    });

您的帖子是在TS中，所以希望您可以翻译它。您可以详细了解如何利用州生命周期here

angular-ui-router $ stateChangeStart事件在Angular Webpack ES2015组件构建中没有触发

2 个答案: