子供ガード：私は角のdocのような場所で子供ガードを入れてみました

Question

を働いていないcanActivateChild：私はコンポーネントの上に私のcanActivateChildガードを入れ

import { AuthGuardService } from '../services/auth-guard.service'; 

const routes = [ 
    { 
     path: '', 
     component: MyComponent, 
     canActivate: [AuthGuardService], 
     children: [{ 
      path: '', 
      canActivateChild: [AuthGuardService], 
      children: [ 
       { 
        path: 'candidature', 
        component: ListCandidatureComponent, 
       }, 
       { 
        path: 'candidature/new', 
        component: NewCandidatureComponent 
       }] 
     }, { 
      path: 'login', 
      component: LoginComponent, 

     }] 
    } 
] 

：

@Injectable() 
export class AuthGuardService implements CanActivate, CanActivateChild { 

    constructor(private authService: AuthentificationService, private router: Router) {} 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    let url: string = state.url; 

    return this.checkLogin(url); 
    } 

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    return this.canActivate(route, state); 
    } 

    checkLogin(url: string): boolean { 
    /*****/ 
    return false; 
    } 
} 

マイrouting.module

無関係な部分であり、認証によってこの経路を保護する。

が、私は「my.site.com/candidature」に到達しようとしたときに、この構成では、私はこのエラーを持っている：私はauthentitcatedないよ場合

Unhandled Promise rejection: guard is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: guard is not a function 

は通常、私はリダイレクトする必要がありますログインページに移動します。 誰かがこのエラーを受けたり、なぜそれがランチされたのかを知っていますか？

感謝の

Answer 1

私の解決策を見つける。私は同じ問題を抱えている誰かのために説明する。

ルーティングモジュールが子ルーティングモジュールであるという事実を除いて、このエラーが発生します。 AppRoutingでAuthGuardServiceを提供する必要があります。

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(routes) 
    ], 
    exports: [RouterModule], 
    declarations: [], 
    providers: [AuthGuardService] //Here add the AuthGuardService to be available in route-module-child 
}) 
export class AppRoutingModule {} 

Answer 2

canActivateChild: [AuthGuardService],はchildren内であってもよいが、親ルートで宣言されていないはずです。

あなたが子供の中の子供を宣言したときには、外側の子供にcanActivateChildも宣言する必要があります。しかし、あなたはそれを使ってテストすることもできます。それが動作するかどうか私に教えてください！

const routes = [ 
    { 
     path: '', 
     component: MyComponent, 
     canActivate: [AuthGuardService], 
     canActivateChild: [AuthGuardService] // it should be placed here! 
     children: [{ 
      path: '', 
      // canActivateChild: [AuthGuardService], // needed or not? 
      children: [ 
       { 
        path: 'candidature', 
        component: ListCandidatureComponent, 
       }, 
       { 
        path: 'candidature/new', 
        component: NewCandidatureComponent 
       }] 
     }, { 
      path: 'login', 
      component: LoginComponent, 

     }] 
    } 
]