如何在AngularJS中利用CanActivateChild守衛(wèi)控制嵌套路由的訪問

在 AngularJS 中，我們可以使用路由守衛(wèi)（Route Guards）來控制對嵌套路由的訪問

1. 首先，創(chuàng)建一個名為 canActivateChild 的服務，該服務將實現(xiàn) CanActivate 接口。在這個例子中，我們將檢查用戶是否具有訪問子路由所需的權(quán)限。

angular.module('myApp', ['ngRoute'])
  .factory('canActivateChild', function($q, AuthService) {
    return {
      canActivate: function(route, state) {
        if (AuthService.hasPermission(state.params.permission)) {
          return true;
        } else {
          return $q.reject('Permission denied');
        }
      }
    };
  })
  .service('AuthService', function() {
    this.hasPermission = function(permission) {
      // 在這里實現(xiàn)你的權(quán)限檢查邏輯
      return true; // 或者 false，取決于用戶是否具有訪問權(quán)限
    };
  });

在這個例子中，我們創(chuàng)建了一個名為 AuthService 的服務，用于檢查用戶是否具有訪問特定路由所需的權(quán)限。你可以根據(jù)你的需求修改這個服務。

2. 然后，在你的路由配置中，將 canActivateChild 服務添加到需要保護的路由中。例如，以下配置表示只有當用戶具有 admin 權(quán)限時，才能訪問 /admin 路由及其子路由。

angular.module('myApp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/admin', {
        templateUrl: 'admin.html',
        controller: 'AdminController',
        canActivateChild: 'canActivateChild'
      })
      .when('/admin/dashboard', {
        templateUrl: 'dashboard.html',
        controller: 'DashboardController'
      })
      .when('/admin/settings', {
        templateUrl: 'settings.html',
        controller: 'SettingsController'
      });
  });

3. 最后，確保在你的應用程序中注入 AuthService 服務，并在需要的地方調(diào)用 hasPermission 方法來檢查用戶是否具有訪問特定路由所需的權(quán)限。

這樣，你就可以使用 CanActivateChild 守衛(wèi)來控制嵌套路由的訪問了。如果用戶沒有所需的權(quán)限，他們將被重定向到錯誤頁面或顯示一個錯誤消息。