多个角度模块用于布线

Question

我可以在AngularJS应用中创建几个用于路由的模块，例如：

1.第一个路由管理文件：

    angular.module('app.p.routes', ['ngRoute'])

    .config(function ($routeProvider, $locationProvider) {
    $routeProvider

        .when('/forbidden',
            {
                templateUrl: 'app/views/pages/forbidden.html'
            })
        .......................

2.第二路径管理文件：

     angular.module('app.admin.routes', ['ngRoute'])

      .config(function ($routeProvider) {
        $routeProvider

        .when('/admin-dashboard',
            {
                templateUrl: 'app/views/pages/admin/dashboard.html',
                controller: 'dashboardController',
                controllerAs: 'dashboard'
            })
        .............................

3.主应用程序文件：

    angular.module('mainApp',
    [
        'ngAnimate',          //animating
        'app.p.routes',         //public routing
        'app.admin.routes',
        'ui.bootstrap',
        'ngParallax',          //parallax effect
        'ngFileUpload'
    ])

当我尝试使用此方法时，页面挂起并抛出角度错误：

> VM188:30554 WARNING: Tried to load angular more than once.

我需要一种将公用和管理路由管理分开的方法。

Answer 1

您可以根据需要拥有多个AngularJS模块。 没有反对的规则，但是，您试图两次包含Angular源，这就是为什么您看到此警告的原因...

> VM188:30554 WARNING: Tried to load angular more than once.

---

我能想到的最简单的解决方案是在$routeChangeStart事件中添加事件侦听器。 这样，您就可以在实际执行操作之前验证当前用户是否具有查看任何内容的正确权限。

一个简单的服务就可以为当前用户存储一些基本信息。

var app = angular.module('app', ['ngRoute']);

app.service('AuthenticationService', function () {
  // Set the User object
  this.setUser = function () {
    this.$user = user;
  };

  // Get the User object
  this.getUser = function (user) {
    return this.$user
  };
});

然后，在收到$routeChangeStart事件后，可以检索用户对象并确认是否允许他们继续选择的资源。

这是一个示例，用户需要是管理员才能查看其中包含“ / admin”的任何路由。

app.run(function ($rootScope, $location, AuthenticationService) {
  // Create a listener for the "$routeChangeStart" event
  $rootScope.$on('$routeChangeStart', function () {
    // Is the user is an Administrator? Are they attempting to access a restricted route?
    if ($location.url().indexOf('/admin') && !AuthenticationService.getUser().isAdmin) {
      // Redirect the user to the login page
      $location.path('/login');
    }
  });
});

---

但是，如果您需要更高级的解决方案，请查看以下内容： https : //github.com/Narzerus/angular-permission

这将使您能够在整个应用程序中实现更深入的ACL实施。