Angular2 CanActivate Navigate

Question

私には以下の問題があります。私はCanActivate Guardを作っており、そこにログインしている場合は債務コンポーネントに「行く」ことができます。私の問題は、私がログインしているときに私は（実際に私のページがブロックされて..と私は何もすることはできません）実際には動作していない、（デフォルトのため、RegisterComponentは）債務コンポーネントにユーザーをリダイレクトしたいです。マイCanActivate機能

export class AuthGuardService implements CanActivate { 

constructor(private router: Router) { } 

canActivate(): Promise<boolean>{ 
    return checkIfAuth().then(() => { 
     setLoggedIn(true); 
     this.router.navigate(['/debts']); // <- broken :(
     return true; 
    }).catch(() => { 
     setLoggedIn(false); 
     this.router.navigate(['/login']); // <- broken :(
     return false; 
    }) 
    } 
} 


export function checkIfAuth() { 
return new Promise((resolve, reject) => { 
    firebase.auth().onAuthStateChanged((user) => { 
     if(user){ 
      return resolve(true); 
     } 
     else{ 
      return reject(false); 
     } 
    }) 
    }) 
} 

でも私app.routing私が何をしたか

const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: '/registration', pathMatch: 'full' }, 
    { path: 'registration', component: RegistrationComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'myaccount', component: AccountComponent, canActivate: [AuthGuardService]}, 
    { path: 'debts', component: DebtsComponent, canActivate: [AuthGuardService]} 
]; 

Answer 1

はハックのようなものだったが、それは完璧に動作します：

まず、私は私のLoginCompomentルート上のセットアップにGuardをしました。

{ path: 'login', component: LoginComponent, canActivate: [AuthGuard] } 

そして、私は、ユーザーが到達しようとしたものを私に示して、私のURL状態の単一のインスタンスを取得するためにRouterStateSnapshotを使用しています。私はその後、ガードのケースを管理することができます

：スナップショットについて

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 

... 

/** 
* Protects the routes to reach with authentication 
*/ 
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    // Set user authentication state depending on the token's existance 
    this.authService.setLoggedInState(); 
    // Check user authentication state 
    if (this.authService.isAuthenticated) { 
     // Explicit navigation to '/login' while the user is already authenticated 
     if (state.url === '/login') { 
     this.router.navigate(['/dashboard']); // Debts for you 
     } 
     return true; 
    } else { 
     // Allow route to './login' to get authenticated 
     if (state.url === '/login') { 
     return true; 
     } 
     // Explicit navigation to any URL while not being authenticated 
     this.router.navigate(['/login']); 
     return false; 
    } 
    } 

ドキュメントへのリンク：https://angular.io/docs/ts/latest/guide/router.html#!#sts=Snapshot:%20the%20no-observable%20alternative

それはあなたのケースで動作させるために、あなたは自分の場合これにsetLoggedInState()を適応する必要がありますあなたはすでに持っているようです。

N.B：それはまだ、ユーザーは、彼が認証されていない場合でも、それに到達することができますしながら、あなたが実際にLoginにガードを設定するので、私はHACKこのソリューションを呼び出します。まだうまく動作します。