Angular 路由器导航守卫指南-JavaScript中文网-JavaScript教程资源分享门户

路由是我们构建单页应用程序时必不可少的一部分，它允许我们在应用程序中切换不同的视图和组件。在 Angular 中，我们可以使用路由器来管理我们的路由。而路由器导航守卫则是一种非常有用的特性，它允许我们在路由切换过程中执行一些操作，比如验证用户身份、检查权限等。

在本文中，我们将深入介绍 Angular 路由器导航守卫，并提供一些示例代码和指导意义。让我们开始吧！

路由器导航守卫

路由器导航守卫是 Angular 路由器中的一种特殊类型的中间件，它允许我们在路由切换过程中执行一些操作。路由器导航守卫有以下几种类型：

CanActivate：用于检查用户是否有权限访问某个路由。
CanActivateChild：用于检查用户是否有权限访问某个路由的子路由。
CanDeactivate：用于在用户离开当前路由时执行一些清理操作。
Resolve：用于在路由激活之前预先加载一些数据。

这些导航守卫都实现了 CanActivateChild 接口，它们都有一个 canActivateChild 方法，用于检查用户是否有权限访问某个路由或子路由。如果返回 true，则允许访问，否则将被阻止。

下面我们来看一些示例代码，以更好地理解路由器导航守卫的用法。

示例代码

CanActivate

CanActivate 导航守卫用于检查用户是否有权限访问某个路由。下面是一个示例代码：

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login'], {
        queryParams: { returnUrl: state.url }
      });
      return false;
    }
  }
}

在这个示例中，我们创建了一个 AuthGuard 类，它实现了 CanActivate 接口。在 canActivate 方法中，我们检查用户是否已经登录。如果已经登录，则允许访问路由，否则将用户重定向到登录页面。

CanActivateChild

CanActivateChild 导航守卫用于检查用户是否有权限访问某个路由的子路由。下面是一个示例代码：

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class AdminAuthGuard implements CanActivateChild {
  constructor(private authService: AuthService, private router: Router) {}

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isAdmin()) {
      return true;
    } else {
      this.router.navigate(['/unauthorized']);
      return false;
    }
  }
}

在这个示例中，我们创建了一个 AdminAuthGuard 类，它实现了 CanActivateChild 接口。在 canActivateChild 方法中，我们检查用户是否是管理员。如果是管理员，则允许访问子路由，否则将用户重定向到未授权页面。

CanDeactivate

CanDeactivate 导航守卫用于在用户离开当前路由时执行一些清理操作。下面是一个示例代码：

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class ConfirmLeaveGuard implements CanDeactivate<ComponentWithDirtyState> {
  canDeactivate(
    component: ComponentWithDirtyState,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (component.isDirty()) {
      return confirm('Are you sure you want to leave this page?');
    } else {
      return true;
    }
  }
}

在这个示例中，我们创建了一个 ConfirmLeaveGuard 类，它实现了 CanDeactivate 接口。在 canDeactivate 方法中，我们检查组件是否有未保存的数据。如果有未保存的数据，则在用户离开当前路由时弹出确认对话框。

Resolve

Resolve 导航守卫用于在路由激活之前预先加载一些数据。下面是一个示例代码：

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class UserResolver implements Resolve<User> {
  constructor(private userService: UserService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<User> | Promise<User> | User {
    const id = route.paramMap.get('id');
    return this.userService.getUser(id);
  }
}

在这个示例中，我们创建了一个 UserResolver 类，它实现了 Resolve 接口。在 resolve 方法中，我们从路由参数中获取用户 ID，并通过 UserService 加载用户数据。

指导意义

路由器导航守卫是 Angular 中非常有用的特性，它允许我们在路由切换过程中执行一些操作，比如验证用户身份、检查权限等。使用路由器导航守卫可以提高应用程序的安全性和可靠性。

在使用路由器导航守卫时，我们需要注意以下几个方面：

尽量避免在导航守卫中进行异步操作，这可能会导致路由切换失败。
避免在导航守卫中对路由进行直接修改，这可能会导致不可预料的结果。
对于一些需要共享的导航守卫，应该将其定义为服务，并使用依赖注入来共享。

总之，路由器导航守卫是 Angular 中非常有用的特性，它可以提高应用程序的安全性和可靠性。在实际开发中，我们应该根据具体情况来选择合适的导航守卫，并遵循最佳实践来使用它们。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d4ea9ca941bf71349283a7

Angular 路由器导航守卫指南