如何在AngularJS中處理路由守衛以實現訪問控制

在 AngularJS 中，我們可以使用路由守衛（Route Guards）來實現對用戶訪問的控制。路由守衛是一種機制，可以在路由發生變化之前進行權限驗證或其他檢查。以下是如何在 AngularJS 中實現路由守衛的基本步驟：

1. 創建一個服務：首先，我們需要創建一個服務來實現我們的路由守衛邏輯。這個服務將會包含我們的權限驗證邏輯，并在路由發生變化之前調用。
2. 注入依賴：在服務中，我們需要注入 $routeChangeStart 事件和 $q 服務。$routeChangeStart 事件會在路由發生變化之前觸發，而 $q 服務則用于處理異步操作。
3. 實現守衛邏輯：在服務中，我們需要實現我們的守衛邏輯。這可能包括檢查用戶的身份驗證狀態、角色或其他權限信息，以確定用戶是否有權訪問即將導航到的路由。
4. 返回結果：守衛服務需要返回一個 promise。如果用戶有權訪問，那么 promise 應該被解析（resolve）。如果用戶無權訪問，那么 promise 應該被拒絕（reject），這將導致路由變化被取消。
5. 在路由配置中使用守衛：最后，我們需要在路由配置中使用我們的守衛服務。我們可以將守衛服務的名稱作為 resolve 屬性添加到路由配置中，這樣 AngularJS 就知道在路由發生變化之前需要調用我們的守衛服務。

下面是一個簡單的示例，展示了如何在 AngularJS 中實現一個基于用戶角色的訪問控制路由守衛：

// 創建一個服務來實現路由守衛邏輯
app.service('AuthGuard', function($routeChangeStart, $q) {
  this.canNavigate = function(nextRoute) {
    // 這里只是一個簡單的示例，實際應用中你可能需要檢查用戶的身份驗證狀態、角色等信息
    if (nextRoute.meta.requiresAuth && !isUserAuthenticated()) {
      return $q.reject('You are not authorized to access this route');
    }
    return true;
  };

  function isUserAuthenticated() {
    // 這里應該包含實際的用戶身份驗證邏輯
    return true; // 或者 false，取決于用戶是否已登錄
  }
});

// 在路由配置中使用守衛服務
app.config(function($routeProvider) {
  $routeProvider
    .when('/protected', {
      templateUrl: 'protected.html',
      controller: 'ProtectedController',
      resolve: {
        auth: ['AuthGuard', function(AuthGuard) {
          return AuthGuard.canNavigate($route.current);
        }]
      }
    })
    .otherwise({
      redirectTo: '/'
    });
});

在這個示例中，我們創建了一個名為 AuthGuard 的服務，它包含一個 canNavigate 方法來檢查用戶是否有權訪問即將導航到的路由。然后，我們在路由配置中使用 resolve 屬性將 AuthGuard 服務添加到 /protected 路由的解析過程中。如果用戶無權訪問該路由，那么路由變化將被取消，并且用戶將被重定向到根路徑。