如何在AngularJS中管理路由守衛

在 AngularJS 中，路由守衛（Route Guards）是一種機制，用于控制用戶對應用程序中不同路由的訪問權限

1. 創建一個服務：首先，創建一個新的服務，例如 auth-guard.service.js。這個服務將包含我們的路由守衛邏輯。

angular.module('app').factory('AuthGuardService', function() {
  return {
    canActivate: function(route, state) {
      // 在這里實現你的訪問控制邏輯
    }
  };
});

2. 實現 canActivate 方法：在 AuthGuardService 中，實現 canActivate 方法。這個方法接收兩個參數：當前路由對象 route 和即將激活的路由狀態對象 state。你可以在這個方法中檢查用戶的身份驗證狀態，例如檢查用戶是否已登錄。

canActivate: function(route, state) {
  if (userIsAuthenticated()) {
    return true;
  } else {
    if (state.data && state.data.requiresAuthentication) {
      $location.path('/login');
      return false;
    }
  }
}

3. 在路由配置中使用守衛：現在你可以在應用程序的路由配置中使用 AuthGuardService 來保護需要身份驗證的路由。例如：

angular.module('app').config(function($routeProvider) {
  $routeProvider
    .when('/dashboard', {
      templateUrl: 'dashboard.html',
      controller: 'DashboardController',
      data: { requiresAuthentication: true },
      canActivate: ['AuthGuardService']
    })
    .when('/login', {
      templateUrl: 'login.html',
      controller: 'LoginController'
    });
});

在這個例子中，我們保護了 /dashboard 路由，只有經過身份驗證的用戶才能訪問。如果用戶未登錄，他們將被重定向到 /login 路由。

4. 創建登錄和注銷功能：為了完整性，你還需要在應用程序中實現登錄和注銷功能。當用戶登錄時，將他們的身份驗證狀態存儲在本地存儲、會話存儲或其他地方。當用戶注銷時，清除存儲的身份驗證狀態。

5. 在控制器和服務中使用身份驗證狀態：最后，確保在需要檢查用戶身份驗證狀態的控制器和服務中注入 AuthGuardService，并根據需要使用它。

這就是在 AngularJS 中管理路由守衛的基本方法。你可以根據需要擴展和自定義這些守衛，以實現更復雜的訪問控制邏輯。