Angular 中有哪些类型的路由守卫？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

CanActivate

CanActivate 守卫用于决定用户是否可以访问某个路由。它通常用于检查用户是否已经登录或是否具有访问权限。如果守卫返回 true，则允许访问；如果返回 false，则阻止访问。

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    // 检查用户是否已登录
    return this.authService.isLoggedIn();
  }
}

CanActivateChild

CanActivateChild 守卫与 CanActivate 类似，但它用于控制用户是否可以访问某个子路由。它通常用于保护一组子路由。

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class AuthChildGuard implements CanActivateChild {
  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    // 检查用户是否具有访问子路由的权限
    return this.authService.hasChildAccess();
  }
}

CanDeactivate

CanDeactivate 守卫用于控制用户是否可以离开当前路由。它通常用于在用户离开页面之前提示保存未保存的更改。

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class SaveChangesGuard implements CanDeactivate<SomeComponent> {
  canDeactivate(
    component: SomeComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    // 检查是否有未保存的更改
    return component.canDeactivate();
  }
}

CanLoad

CanLoad 守卫用于控制是否允许延迟加载某个模块。它通常用于在加载模块之前检查用户是否具有访问权限。

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class AuthLoadGuard implements CanLoad {
  canLoad(
    route: Route,
    segments: UrlSegment[]
  ): boolean | Observable<boolean> | Promise<boolean> {
    // 检查用户是否具有加载模块的权限
    return this.authService.canLoadModule();
  }
}

Resolve

Resolve 守卫用于在路由激活之前获取数据。它通常用于在路由激活之前预取数据，以便在组件加载时数据已经可用。

// www.javascriptcn.com code example
@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<SomeData> {
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): SomeData | Observable<SomeData> | Promise<SomeData> {
    // 获取数据
    return this.dataService.getData();
  }
}

通过使用这些路由守卫，开发者可以更好地控制 Angular 应用中的路由访问和导航行为。

Angular 中有哪些类型的路由守卫？

推荐答案