Question

我有以下UI路由器配置包括一个登录页面（/ login），一个抽象页面，它将是我所有管理页面的父项（/ admin）和一个从抽象页面扩展的列表页面（/ admin /列表）：

    $stateProvider
  .state('login', {
    url: '/login',
    templateUrl: '/pub/login.html',
    controller: 'LoginController',
    controllerAs: '$loginCtrl',
    onEnter: function () {
      console.log("enter /login");
    }
  })
  .state('admin', {
    abstract: true,
    url: '/admin',
    templateUrl: '/tmpl/templateAdmin.html',
    onEnter: function () {
      console.log("enter admin abstract");
      // Validate JWT here and if not authenticated forward to login
      $state.go('login');
    }
  })
  .state('admin.list', {
    url: '/list',
    templateUrl: '/prv/clientsList.html',     // loaded into ui-view of parent's template
    controller: 'AppController',
    controllerAs: '$appCtrl',
    onEnter: function () {
      console.log("enter admin/list");
    }
  })

我想实现一个逻辑，用于验证用户在访问/ admin / *页面时是否经过身份验证。为了做到这一点，我在我的抽象状态中添加了一个onEnter函数，以便我可以使用$ state.go（'login'）。但这不起作用。我怎样才能做到这一点？是否有更好的方法来验证UI路由器中的身份验证？

Answer 1

在这种情况下，我认为最好使用resolve代替onEnter。

主要是因为您想在导航之前检查用户是否经过身份验证。如果块内的对象没有解析，则传递给该状态的控制器将不会被实例化。

.state('admin', {
  abstract: true,
  url: '/admin',
  templateUrl: '/tmpl/templateAdmin.html',
  resolve: {
    currentUser: function (authService) {
      return authService.getUser();
    }
  }
}

root状态会尝试解析嵌套在其中的所有子视图的用户。

以下是有关嵌套状态和继承已解决的依赖关系的文档的链接：

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

$ state.go on onEnter函数的抽象状态

1 个答案: