앵 귤 러 루트 수위

머리말
기업 응용 에서 권한,복잡 한 페이지 의 다 중 경로 데이터 처리,진입 과 이탈 경로 데이터 처리 등 은 흔히 볼 수 있 는 수요 이다.
사용자 가 정상 적 인 편집 페이지 를 떠 나 기 를 바 랄 때 중단 하고 사용자 에 게 정말 떠 나 야 하 는 지 알려 줄 때 Angular 에서 어떻게 해 야 합 니까?
사실 Angular 경로 의 수비 속성 은 우리 에 게 더 많은 의미 있 는 일 을 해 줄 수 있 고 매우 간단 하 다.
경로 가 무엇 입 니까?
Angular 의Route 경로 매개 변수 에는 익숙 한path,component 을 제외 하고 경로 활성화 와 이탈 을 허용 하 는 네 가지 속성 도 포함 된다.
canActivate
경로 진입 허용 여 부 를 제어 합 니 다.
canActivateChild
canActivate 와 같 습 니 다.모든 하위 경로 에 불과 합 니 다.
canDeactivate
경로 에서 벗 어 날 수 있 는 지 여 부 를 제어 합 니 다.
canLoad
전체 모듈 을 불 러 오 는 지연 여 부 를 제어 합 니 다.
예 를 들 면:



{ path: 'logics', loadChildren: './logics/logics.module#LogicsModule', canLoad: [ AuthGuard ] }

이 네 가지 속성 은 매우 이해 하기 쉽 고 역할 도 각각 다르다.그리고 진입 과 이탈 이 효과 적 인 통제 권 을 가 질 수 있 을 때 앞에서 제 가 언급 한 몇 가지 문제 에 대해 잘 처리 할 수 있 습 니 다.
어떻게 만 듭 니까?
네 개의 속성 은 이름 은 다 르 지만 기본 적 인 사용 방식 은 매우 비슷 하 다.네 가지 서로 다른 수비 방식 은 네 개의 서로 다른 인터페이스 와 대응 된다.
속성 명
인터페이스 이름
canActivate
CanActivate
canActivateChild
CanActivateChild
canDeactivate
CanDeactivate
canLoad
CanLoadcanDeactivate 구체 적 인 구성 요소 유형 을 가리 키 는 것 외 에 다른 인 터 페 이 스 는 이니셜 만 대문자 로 쓸 뿐이다.어떤 캐릭터 가 있어 야 어떤 길 을 방문 할 수 있다 고 가정 하면 하나의CanActivate 수비 류 가 필요 하 다.


@Injectable()
export class CanAdminProvide implements CanActivate {

  constructor(private userSrv: UserService, private msg: NzMessageService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return new Observable((observer) => {
      //    `admin`   
      if (this.userSrv.hasRole('admin')) {
        observer.next(true);
        observer.complete();
        return;
      }

      this.msg.error('    ');
      observer.next(false);
      observer.complete();
    });
  }

}

모든 인 터 페 이 스 는 상응하는 실현 방법 이 필요 하 다.위 에서 말 하면 CanActivate 를 계승 하고 canActivate 라 는 방법 을 실현 해 야 한다.불 형식의 값 을 되 돌려 줍 니 다.
네 가지 유형의 수비 인 터 페 이 스 는 모두 하나의 불 형식 값 을 되 돌려 줍 니 다.사실은 이 네 가지 매개 변수의 이름 인 can 에서 시작 하면 이해 하지 못 합 니 다.
마지막 으로 이 를 해당 하 는 경로 에 활용 하면 된다.예 를 들 어:



{ path: 'admin', component: GuardAdminComponent, canActivate: [ CanAdminProvide ] }

물론,CanAdmin Provide 류 등록 을 잊 지 마 세 요.
약간의 실천
떠 날 때 알림
네 가지 수 비 는 한 가지 이탈 유형canDeactivate만 있 기 때문에:


@Injectable()
export class CanLeaveProvide implements CanDeactivate<GuardComponent> {
  constructor (private confirmSrv: NzModalService) {}

  canDeactivate(
    component: GuardComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return new Observable((observer) => {
      this.confirmSrv.confirm({
        title: '      ？',
        content: '                      。',
        okText: '  ',
        cancelText: '  ',
        onOk: () => {
          observer.next(true);
          observer.complete();
        },
        onCancel: () => {
          observer.next(false);
          observer.complete();
        }
      });
    });
  }
}

여기 서 되 돌아 오 는 것 은Observable 유형 입 니 다.의미 자 는 방법 내 에서 모든 일 을 할 수 있 고 결과 에서 만 사용 할 수 있 습 니 다.


//   
observer.next(true); 
//    
// observer.next(false);

observer.complete();

Observable 을 처리 한 결과 전체 절 차 를 마 쳤 습 니 다.사용자 가 브 라 우 저 에 따라 뒤로 물 러 나 거나 다른 페이지 로 이동 할 때 먼저 알림 을 받 습 니 다.
위 에서 사용 하 는 ng-zorro-antd 확인 대화 상 자 는 사용자 에 게 떠 나 야 하 는 지 여 부 를 알려 줍 니 다.[떠 나 기]를 선택 하면 대상 경로 로 이동 하고 현재 경로 상 태 를 유지 합 니 다.

역할 제한
이것 은 더 이상 정상 적 이지 않 은 기능 입 니 다.만약 에 사용자 가 권한 이 부여 되 지 않 은 경로 에 들 어 갈 때 심지어 특정한 지연 로드 모듈 에서 모든 경로 입 니 다.사용자 가 권한 이 없 을 때 어떻게 사용자 에 게 알려 줍 니까?
이때 canActivate,canLoad 가 유용 합 니 다.관리자 역할 을 가정 해 야 관리 모듈 에서 모든 관리 기능 과 특정한 관리 페이지 를 불 러 올 수 있 습 니 다.인터페이스 다 중 계승 특성 을 바탕 으로 이 두 인 터 페 이 스 를 동시에 계승 할 수 있 습 니 다.


@Injectable()
export class CanAuthProvide implements CanActivate, CanLoad {

  constructor(private userSrv: UserService, private msg: NzMessageService) {}

  check(): Observable<boolean> {
    return new Observable((observer) => {
      if (this.userSrv.isLogin) {
        observer.next(true);
        observer.complete();
        return;
      }

      this.msg.error('    ');
      observer.next(false);
      observer.complete();
    });
  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return this.check();
  }

  canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> {
    return this.check();
  }

}

따라서 한 가지 유형 중 두 가지 서로 다른 수비 능력 을 가지 고 코드 조직 에 도 우아 하 다.마찬가지 로 해당 경로 에 활용 해 야 한다.


{ path: 'auth', component: GuardAuthComponent, canActivate: [ CanAuthProvide ] },
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [ CanAuthProvide ] }

이후 일반 직원 계 정 이(브 라 우 저 주소 표시 줄 에 입력 하 더 라 도)권한 이 부여 되 지 않 은 경로/auth 에 들 어 가 려 면 권한 이 부족 하 다 는 글 자 를 알려 줍 니 다.

총결산
경로 수 비 는 권한 통제 에 매우 편리 하 다.물론 그 입 도 는 당연히 페이지 등급 에 만 있 을 수 있다.버튼 의 입도 에 대해 서도 명령 의 방식 만 사용 할 수 있 고,이들 의 결합 은 매 립 점 의 코드 량 을 제어 할 수 있 는 권한 을 크게 개선 할 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Angular에서 타사 스크립트 및 CSS 작업

Angular 방식으로 회로도가 있는 외부 라이브러리를 추가하거나 모듈을 가져옵니다. Angular.json은 Angular 프로젝트의 모든 설정 파일이며 표준 JavaScript 및 CSS 파일과 함께 타사 라이브...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

앵 귤 러 루트 수위

좋은 웹페이지 즐겨찾기