AngularJS - 如何從URL

我與路線的工作禁止訪問：AngularJS - 如何從URL

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從瀏覽器也。是否有可能通過網址禁用訪問？

來源

2014-09-27 Maciej

你爲什麼要這麼做？ – 2014-09-27 13:52:05

導航到沒有上下文的編輯頁面（之前選擇的項目）沒有意義。 – Maciej 2014-09-27 16:13:33

當然這很有道理。但是編輯頁面的URL應該是'/ editOrder/{orderId}'。這就是你的配置所缺少的。 – 2014-09-27 16:15:32

您可以使用$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。

來源

2014-09-27 14:36:58 Vadim

謝謝，這解決了我的問題。 – Maciej 2014-09-27 16:19:44

可以使用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("/"); 
      } 
     } 
    });

來源

2014-09-27 14:18:04

AngularJS - 如何從URL

回答

相關問題