Question

我正在使用路线：

App.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'orders/list',
        controller: OrderController
    });   

    $routeProvider.when('/editOrder', {
        templateUrl: 'addOrder/editOrder',
        controller: ActionController
    });

    $routeProvider.otherwise({redirectTo: '/home'});

我只想在单击按钮时导航到编辑页面，但此定义允许从浏览器通过URL访问。是否可以通过网址禁用访问权限？

Answer 1

您可以使用resolve属性并在外部服务上设置一些变量：

App.factory('editMode', function(){
  var editMode = false;
  return {
    getEditMode: function(){ return editMode; },
    setEditMode: function(edit) { editMode = edit; }
  }
}

然后在路线上：

$routeProvider.when('/editOrder', {
        templateUrl: 'addOrder/editOrder',
        controller: ActionController,
        resolve: function(editMode){
           if(!editMode.getEditMode()) {
              $location.path( "/" );
           }
        }
    });

Answer 2

您可以使用$routeChangeStart事件在要更改的路线上实施自定义逻辑，并根据某些条件/权限否决导航。在以下示例中，只有在您已授予权限的情况下才能导航到/edit路由，您可以使用PermissionsService服务授予或撤消权限。在以下示例中，您可以尝试通过直接链接进行导航，并看到您被重定向到默认路由，当您单击“编辑”按钮时，您将被重定向到相关路由。此外，如果您使用/edit路线并使浏览器前后移动，您可以注意到您无法返回/edit路线。

<强> HTML

<a href="#/home">Home</a>
<a href="#/edit">Edit</a>
<div ng-view></div>
<button ng-click="edit()">Edit</button>

<强>的JavaScript

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/home', {
        templateUrl: 'list.html',
        controller: 'OrderController'
    });   

    $routeProvider.when('/edit', {
        templateUrl: 'edit.html',
        controller: 'ActionController'
    });

    $routeProvider.otherwise({redirectTo: '/home'});
  }]).
  run(['$rootScope', '$location', 'PermissionsService', function($rootScope, $location, PermissionsService) {
    $rootScope.edit = function() {
      PermissionsService.setPermission('edit', true);
      $location.path('/edit');
    };
    $rootScope.$on("$routeChangeStart", function(event, next, current) {
      if (next.templateUrl === "edit.html") {
        if(!PermissionsService.getPermission('edit')) {
          $location.path('/');
        }
        PermissionsService.setPermission('edit', false);
      }
    });
  }]).
  service('PermissionsService', [function() {
    var permissions = {
      edit: false
    };
    this.setPermission = function(permission, value) {
      permissions[permission] = value;
    }
    this.getPermission = function(permission) {
      return permissions[permission] || false;
    }
  }]).
  controller('OrderController', [function() {}]).
  controller('ActionController', [function() {}]);

实例here。

AngularJS - 如何禁用URL访问

2 个答案: