如何在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 中管理路由守卫的基本方法。你可以根据需要扩展和自定义这些守卫，以实现更复杂的访问控制逻辑。