이 기사에서는 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
- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
