보호 뷰, 인증 또는 canActivate는

Question

나는 현재, 이미 대부분 같은 것을 내려 오는 몇 가지 기본 angular2-router 구성을이 각도 2.

와 ui-router를 사용하려고 할 수 있다고 생각 :

export const homeRoute: Route = { 
    path: '', 
    component: HomeComponent, 
    canActivate: [AuthGuard] 
}; 

ui-router 문서는 유사한 예를 도시 docs :

export let state1: Ng2StateDeclaration = { 
    name: 'state1', 
    component: State1Component, 
    url: '/one' 
} 

와트 ould는 괜찮지 만 하나의 누락 된 키는 canActivate입니다. 각도 1에서

나는 좋은 lib 디렉토리를 사용했다 : angular-permission하지만, 그러나 나는 간단한 참/거짓 인증을 할 것, 순간에 멋진 권한은 필요하지 않습니다 각도 2.

사용할 수 없습니다 I 단순히 내 경로를 보호하는 방법을 모릅니다.

검색을 시도했지만 주제가 너무 신선합니다. 사용할 수있는 예제가 없습니다.

모든 아이디어 주셔서 감사합니다.

Answer 1

API doc에 설명 된대로 TransitionService.onBefore()을 사용해야한다고 생각합니다. 이 클래스는 ui-router-core 패키지의 일부 그것은이다 간단하게 말해서

각도 1에서 $transitions의 직접 교체하는 function checkAuthentication(transition: Transition): boolean에 콜백을 추출 할 수 있습니다

TransitionService.onBefore({to: 'requiresAuth.*'}, (transition: Transition) => { 
    let auth = transition.injector().get(YourOwnAuthService); 
    if (!auth.isLoggedIn()) { 
     return transition.router.stateService.target('login'); 
    } 
    return true; 
}); 

하나를 사용하여 각도 1 & 2 사이에 공유하고 이 기능을 여러 기본 상태에 적용합니다. 예 :

['dashboard.*', 'report.*', 'sale.*'].forEach(state => { 
    TransitionService.onBefore({to: state}, checkAuthentication); 
}); 

이 코드 스 니펫은 사용자의 ui-router 상태 정의 바로 아래에 배치 할 수 있습니다.

Answer 2

나는 그것을 구현하는 PoC 응용 프로그램을 제공하고 싶습니다. Github에서 직접 찾으십시오. 코드가 메시지 상자에 너무 많이있을 수 있습니다.

LoggedInGuard ("/app/shared/guards/logged-in.guard.ts") https://github.com/AFigueroa/angular2-poc/blob/master/app/shared/guards/logged-in.guard.ts

AppRoutingModule ("는을 /app/app-routing.module.ts ") https://github.com/AFigueroa/angular2-poc/blob/master/app/app-routing.module.ts