Route Guards의 Angular 학습 경로에 대한 간략한 분석

이 기사에서는 Angular의 Route Guard를 이해하고 Route Guard를 생성하는 방법, 경로 활성화 여부 제어 및 경로 종료 가능 여부를 제어하는 ​​방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

환경:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• 노드: 12.18.3

• npm : 6.14.6

• IDE : Visual Studio Code

실제 비즈니스 개발 과정에서 다음과 같은 요구 사항에 자주 직면합니다.

• 특정 URL에 대한 액세스를 제한해야 합니다. 예를 들어 시스템 관리 인터페이스의 경우 관리자 권한으로 열 수 있습니다. [관련 튜토리얼 추천: "angular tutorial"]

• 사용자가 편집 인터페이스에서 저장하지 않고 나갈 때 사용자에게 수정을 포기할지 묻는 메시지가 표시되어야 합니다.

위 시나리오의 경우 Angualr는 Route Guards(Route Guards)를 사용하여 구현합니다. 路由守卫（Route Guards）来实现。

路由守卫（Route Guards）

1. 创建路由守卫

Angular CLI提供了命令行工具，可以快速创建路由守卫框架文件：ng generate guard auth。 执行后，Angular CLI会问我们需要实现哪些接口，我们直接勾选即可：

? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad

说明：

• CanActivate: 控制路由是否可以激活

• CanActivateChild: 控制子路由是否可以激活

• CanDeactivate: 控制路由是否可以退出

• CanLoad: 控制模块（module）是否可以被加载

比较经常使用的是1、3，分别控制进入和退出。 按照上面配置，AngularCLI自动生成如下代码，return true; 替换为我们实际的代码即可。return false; 表示不允许跳转，或者取消离开当前页面。

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanDeactivate<unknown> {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

在canActivate方法中，我们还可以使用跳转。如页面判断是否已经登录，如果没有登录，跳转到Login页面：

this.router.navigate(['/login']);
return false;

2. 控制路由是否可以激活

控制路由是否可以激活，需要定义在定义路由的地方，增加canActivate属性。如果需要，还可以增加data属性， 比如告诉我们的AuthGuard进入当前路由需要验证哪些权限。data属性是可选的。

const routes: Routes = [
  {
    path: "page1",
    component: Page1Component,
    data: { permissions: ['YourPage1Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  },
  {
    path: "page2",
    component: Page2omponent,
    data: { permissions: ['YourPage2Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  }
]

3. 控制路由是否退出（离开）

和控制路由是否可以激活类似，在路由定义出增加 canDeactivate

Route Guards

1. 경로 가드 생성

• Angular CLI는 라우팅 가드를 빠르게 생성할 수 있는 명령줄 도구를 제공합니다. 프레임워크 파일: ng 가드 인증 생성. 실행 후 Angular CLI는 구현해야 할 인터페이스가 무엇인지 묻습니다. 간단히 확인할 수 있습니다.

  rrreee

  설명:

• CanActivate: 경로를 활성화할 수 있는지 여부를 제어합니다.

CanActivateChild: 하위 경로를 활성화할 수 있는지 여부를 제어합니다. 경로를 활성화할 수 있습니다

🎜🎜CanDeactivate: 경로를 종료할 수 있는지 여부를 제어합니다🎜🎜🎜🎜CanLoad: 모듈을 로드할 수 있는지 여부를 제어합니다🎜🎜🎜🎜더 일반적으로 사용되는 것은 1과 3으로, 각각 진입과 종료를 제어합니다. . 위 구성에 따라 AngularCLI는 자동으로 다음 코드를 생성합니다. return true;를 실제 코드로 바꾸세요. return false;는 점프가 허용되지 않거나 현재 페이지 나가기가 취소됨을 의미합니다. 🎜rrreee🎜canActivate 메소드에서는 점프도 사용할 수 있습니다. 예를 들어 페이지에서는 로그인 여부를 확인합니다. 로그인하지 않은 경우 로그인 페이지로 이동하세요. 🎜rrreee🎜2. be activate🎜🎜경로 활성화 여부를 제어하려면 경로가 정의된 곳에 경로를 정의하고 canActivate 속성을 추가해야 합니다. 필요한 경우 현재 경로에 들어가기 위해 확인해야 하는 권한을 AuthGuard에 알려주는 등 데이터 속성을 추가할 수도 있습니다. 데이터 속성은 선택 사항입니다. 🎜rrreee🎜3. 경로 이탈 여부 제어(leave)🎜🎜는 경로 활성화 여부를 제어하는 ​​것과 유사합니다. 이는 canDeactivate 추가 경로에 정의되어 있으며 해당 Guard를 공식화합니다. 여기에 더 이상 예제가 없습니다🎜🎜요약🎜🎜🎜🎜Route Guard를 사용하여 URL의 시작 및 종료를 제어하세요.🎜🎜🎜🎜Angular CLI는 가드 파일을 생성하는 데 도움을 줄 수 있습니다.🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. : 🎜프로그래밍 입문🎜! ! 🎜

위 내용은 Route Guards의 Angular 학습 경로에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!