如何在AngularJS中利用CanDeactivate守衛保護路由

在 AngularJS 中，我們可以使用 CanDeactivate 守衛來保護路由，確保用戶在離開當前頁面之前執行某些操作

1. 首先，確保已經安裝了 AngularJS 和 UI-Router。如果尚未安裝，請查看以下鏈接： AngularJS: https://angularjs.org/ UI-Router: https://ui-router.github.io/ng1/

2. 在你的 AngularJS 應用中，引入 ui.router 模塊作為依賴項。

angular.module('myApp', ['ui.router']);

3. 接下來，為每個需要保護的路由定義一個 CanDeactivate 守衛。CanDeactivate 守衛是一個函數，它接收兩個參數：$state（當前狀態）和$transition（即將發生的過渡）。此函數應返回一個 promise，該 promise 在完成（或取消）操作時解析。

例如，假設我們有一個名為 EditProfile 的狀態，我們需要確保用戶在離開此頁面之前保存其更改。我們可以創建一個名為 canDeactivateEditProfile 的 CanDeactivate 守衛，如下所示：

function canDeactivateEditProfile($state, $transition) {
  // 這里可以執行任何需要在離開頁面之前完成的操作，例如檢查數據是否已保存
  // 如果一切正常，請返回一個解析的 promise
  return true;
}

4. 將 CanDeactivate 守衛添加到路由配置中。對于需要保護的路由，請在 resolve 部分添加一個名為 canDeactivate 的屬性，并將其值設置為我們剛剛創建的守衛函數。

$stateProvider
  .state('editProfile', {
    url: '/edit-profile',
    templateUrl: 'edit-profile.html',
    controller: 'EditProfileController',
    resolve: {
      canDeactivate: canDeactivateEditProfile
    }
  });

現在，當用戶嘗試離開 EditProfile 狀態時，AngularJS 會自動調用 canDeactivateEditProfile 函數。如果此函數返回 true，則用戶可以離開頁面；否則，將顯示一個確認對話框，要求用戶先保存更改或取消操作。

注意：CanDeactivate 守衛不僅限于這些示例中提到的操作。您可以根據需要自定義守衛以執行任何其他操作，例如檢查用戶是否已登錄或驗證表單數據。