如何在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 守卫不仅限于这些示例中提到的操作。您可以根据需要自定义守卫以执行任何其他操作，例如检查用户是否已登录或验证表单数据。