Как скрыть шаблоны с помощью AngularJS ngView для неавторизованных пользователей?

У меня есть базовое PHP-приложение, в котором пользовательский логин хранится в сеансе HTTP. Приложение имеет один основной шаблон, скажем index.html, который переключает подзадача с помощью ngView, например,

<body ng-controller='MainCtrl'>
    <div ng-view></div>
</body>

Теперь этот основной шаблон может быть защищен с помощью базовых элементов управления PHP, но у меня есть подшаблоны (например, список пользователей, добавить пользователя, редактировать пользователя и т.д.), которые представляют собой простые html файлы, включенные из angular в соответствии с моим настройки маршрута.

Пока я могу проверить auth, что касается запроса http-сервисов, один пользователь может перейти к URL-адресу суб-шаблона и получить к нему доступ. Как я могу предотвратить это?

ОТВЕТЫ

Ответ 1

Я бы создал такую ​​услугу:

app.factory('routeAuths', [ function() {
  // any path that starts with /template1 will be restricted
  var routeAuths = [{
      path : '/template1.*',
      access : 'restricted'
  }];
  return {
    get : function(path) {
      //you can expand the matching algorithm for wildcards etc.
      var routeAuth;
      for ( var i = 0; i < routeAuths.length; i += 1) {
        routeAuth = routeAuths[i];
        var routeAuthRegex = new RegExp(routeAuth.path);
        if (routeAuthRegex.test(path)) {
          if (routeAuth.access === 'restricted') {
            return {
              access : 'restricted',
              path : path
            };
          }
        }
      }
      // you can also make the default 'restricted' and check only for 'allowed'
      return {
        access : 'allowed',
        path : path
      };
    }
  };
} ]);

И в главном/корневом контроллере прослушайте события $locationChangeStart:

app.controller('AppController', ['$scope', '$route', '$routeParams', '$location', 'routeAuths',
  function(scope, route, routeParams, location, routeAuths) {
    scope.route = route;
    scope.routeParams = routeParams;
    scope.location = location;

    scope.routeAuth = {
    };

    scope.$on('$locationChangeStart', function(event, newVal, oldVal) {
      var routeAuth = routeAuths.get(location.path());
      if (routeAuth.access === 'restricted') {
        if (scope.routeAuth.allowed) {
          event.preventDefault();
        }
        else {
          //if the browser navigates with a direct url that is restricted
          //redirect to a default
          location.url('/main');
        }
        scope.routeAuth.restricted = routeAuth;
      }
      else {
        scope.routeAuth.allowed = routeAuth;
        scope.routeAuth.restricted = undefined;
      }
    });

}]);

Demo

Ссылки

ОБНОВЛЕНИЕ:

Чтобы полностью предотвратить доступ к шаблону html, лучше всего это сделать и на сервере. Поскольку, если вы обслуживаете html из статической папки на сервере, пользователь может получить доступ к файлу непосредственно ex: root_url/templates/template1.html, тем самым обойдя проверку angular.

Ответ 2

Если вы хотите заблокировать их от перехода на эту страницу, создайте службу: http://docs.angularjs.org/guide/dev_guide.services.creating_services

Эта услуга может быть зависимой от всех ваших контроллеров, зарегистрированных вами с помощью routeParams.

В службе у вас может быть функция, которая будет проверять, зарегистрирован ли пользователь или нет, а затем перенаправить их (возможно, вернуться на страницу входа?) с помощью http://docs.angularjs.org/api/ng. $location # path. Вызовите эту функцию в каждом из таких контроллеров:

function myController(myServiceChecker){
    myServiceChecker.makeSureLoggedIn();
}

Функция makeSureLoggedIn проверит, к какому текущему URL-адресу они подключены (используя путь $location.path), и если ему не разрешено, перенаправляйте их обратно на страницу, на которую они могут быть.

Мне было бы интересно узнать, есть ли способ предотвратить запуск маршрутаParams, но по крайней мере это позволит вам делать то, что вы хотите.

Изменить: также см. мой ответ здесь, вы можете помешать им даже перейти на страницу:

AngularJS - Обнаружение, остановка и отмена изменений маршрута