如何在AngularJS中利用CanDeactivate守衛(wèi)保護(hù)路由

在 AngularJS 中，我們可以使用 CanDeactivate 守衛(wèi)來保護(hù)路由，確保用戶在離開當(dāng)前頁面之前執(zhí)行某些操作

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

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

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

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

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

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

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

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

現(xiàn)在，當(dāng)用戶嘗試離開 EditProfile 狀態(tài)時，AngularJS 會自動調(diào)用 canDeactivateEditProfile 函數(shù)。如果此函數(shù)返回 true，則用戶可以離開頁面；否則，將顯示一個確認(rèn)對話框，要求用戶先保存更改或取消操作。

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